摘要: jquery的animate方法对display的切换不支持,单纯使用opacity的切换并不能真正实现隐藏和显示的效果(如果要实现的元素上面有事件则有几率被触发)。所以下面是demo:1 $('.logo').css({display:'block'});2 $('.logo').animat... 阅读全文
posted @ 2015-02-26 16:04 杜偉 阅读(221) 评论(0) 推荐(0) 编辑
摘要: 功能描述:点击按钮,按钮向下滑动到页面外,同时输入框向上滑动到页面中。点击页面其他部位,按钮向上滑动到页面中,输入框向下滑动到页面外。实现的技术点:给页面其他元素绑定点击事件,判断点击的不是输入框则将输入框隐藏,将输入按钮切换显示。1 var commentInputWrapper = docume... 阅读全文
posted @ 2015-02-09 12:05 杜偉 阅读(1025) 评论(0) 推荐(0) 编辑
摘要: 需求情况如下: 正在做的一个hybird app使用了cordova + html + css + js的实现方案,在首页的广告部分使用了flexslider插件,这个插件在实现loading效果的时候出现了loading层弹出时不能禁止页面滚动的情况(试用了另一个同是基于jquery的滚动插件,... 阅读全文
posted @ 2015-02-09 11:42 杜偉 阅读(1359) 评论(0) 推荐(0) 编辑
摘要: 页面点击链接跳转过程中如果能有loading画面用户体验会好很多,移动端尤其是这样,实现起来也并不难。大体思路就是:点击按钮的时候创建一个全屏的层级最近的div,div中间装一个loading的gif或者svg。在数据加载完成或者页面跳转的时候将这个div移除即可。以下是小demo: 1 ... 阅读全文
posted @ 2015-02-02 10:12 杜偉 阅读(6884) 评论(0) 推荐(1) 编辑
摘要: 大意就是互为兄弟或者父子的两个div当position都是默认的情况下(static),其margin会出现塌陷情况,具体情况就是:互为兄弟的div之间的margin值会取上一个的margin-bottom和下一个的margin-top二者之间较大的显示,而不是二者之和。互为父子的div也会取二者之... 阅读全文
posted @ 2015-01-02 20:02 杜偉 阅读(177) 评论(0) 推荐(0) 编辑
摘要: 方案一: 知晓元素的宽高的情况下,可以使用:div{ position:absolute; left:50%; top:50%; margin-top:0.5*height; margin-left:0.5*width; } 这种方法兼容性更好,但是使用上不够简便,而且需要明确知道元... 阅读全文
posted @ 2015-01-02 17:17 杜偉 阅读(133) 评论(0) 推荐(0) 编辑
摘要: 来自一直在学习的一位大神的博客。http://www.zhangxinxu.com/wordpress/2014/11/button-text-to-loading/另外推广一下这位大神的新作品:mobilebone.js,算是轻量级的jqm吧,试用过,很不错。https://github.com/... 阅读全文
posted @ 2014-12-01 17:07 杜偉 阅读(765) 评论(0) 推荐(0) 编辑
摘要: 首先是div嵌套p的时候,会将div向下拉一段,使得div上面出现一条空白,这个设置p的margin为0就可以了。再就是当一行display为inline-block的div中某个div中包含了文字的时候,这个div会下沉,这是因为它的伸展方向变为向下了,此时设置它的vertical-align为t... 阅读全文
posted @ 2014-11-04 19:40 杜偉 阅读(676) 评论(0) 推荐(0) 编辑
摘要: 常逛知乎的人会熟悉,在知乎PC客户端上面支持最多的(貌似还要达到一定数量)的答案在页面刚加载完的时候会有一个黄色背景渐隐的效果。其实这个做法是很久之前在互联网上看到的一个demo实现了这个效果,当时没注意,今天想起来自己写一下js实现方式。js代码: 1 var x = 0; 2 function ... 阅读全文
posted @ 2014-10-28 17:14 杜偉 阅读(266) 评论(0) 推荐(0) 编辑
摘要: 效果图:用css实现,不会出现图片拉伸问题,同时节省资源。原理:外层为一个大的div,突出的小尖角为一个小div,将小div设置旋转并调整好位置,同时将小div背景色设置为同大div一个颜色。代码:html:1 2 3 hello,world.4 css: 1 #big{ 2 width... 阅读全文
posted @ 2014-10-28 14:17 杜偉 阅读(249) 评论(0) 推荐(0) 编辑