随笔分类 -  WEB前端开发

webkitTransitionEnd，当CSS动画结束执行事件
摘要：var endEvent=function(){//event}绑定：element.addEventListener("webkitTransitionEnd",endEvent,false);及时取消绑定，以免对其他效果造成影响：element.removeEventListener("webkitTransitionEnd",endEvent,false);var transitionEnd = { '' : 'transitionend', 'webkit' : 'webkitTransit 阅读全文
posted @ 2013-04-25 13:05 Ric. 阅读(1003) 评论(0) 推荐(0)
requestAnimationFrame代替interval实现更优质动画
摘要：只是在项目中尝试着代替了interval,据说效果比较好。先记录下。代码片段：var nextFrame=(function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ return setTimeout(callback , 1);};})();function doClose(){ var animationFlag=true; var nowLeft=0... 阅读全文
posted @ 2013-04-25 12:58 Ric. 阅读(357) 评论(0) 推荐(0)
子div相对于父div居中的解决方法
摘要：Html:<divclass="ui-menubar"> <divclass="mbody"> <divclass="menubutton"> <divclass="buttontitle">Refresh</div> </div> <divclass="menubutton"> <divclass="buttontitle">Information</div> < 阅读全文
posted @ 2013-04-08 22:26 Ric. 阅读(2546) 评论(0) 推荐(0)
rgba和opacity透明比较
摘要：在做demo的时候遇到一个问题：Html:<divclass="ui-jumpto"><divclass="button">Today</div><divclass="button">Mostrecentactivity</div><divclass="button">Earliestactivity</div></div>Css:.ui-jumpto{opacity:0.8;//webkit等浏览器。0为完全透明，1为 阅读全文
posted @ 2013-04-08 22:21 Ric. 阅读(523) 评论(0) 推荐(0)
CSS圆角详解
摘要：Radius圆角属性最近项目的前度用到的也比较频繁。简单总结一下该属性用法。语法：border-radius:lengthLength:由浮点数字和单位标示符组成长度值，不能为负数。1.Mozilla(Firefox,Flock等浏览器) -moz-border-radius-topleft://左上角 -moz-border-radius-topright://右上角 -moz-border-radius-bottomright://右下角 -moz-border-radius-bottomleft://左下角 -moz-border-radius://四个角2．WebKit(Sa... 阅读全文
posted @ 2013-01-31 15:40 Ric. 阅读(229) 评论(0) 推荐(0)
CSS,Position属性
摘要：position的四个属性值：relativeabsolutefixedstatic下面分别讲述这四个属性。<div id="parent"> <div id="sub1">sub1</div> <div id="sub2">sub2</div></div>1. relativerelative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设 阅读全文
posted @ 2013-01-31 15:36 Ric. 阅读(159) 评论(0) 推荐(0)
CSS 取图片随意坐标作为背景
摘要：素材图片：源代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--这句一定要有--><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><t 阅读全文
posted @ 2013-01-15 09:20 Ric. 阅读(274) 评论(0) 推荐(0)