09 2011 档案

[翻译]使用requestAnimationFrame实现炫目的动画
摘要：写缓动函数用到requestAnimationFrame函数，之前了解过一些，但总觉得又不是很了解，所以翻译一篇老外的文章，以便学习分享。requestAnimationFrame是什么？以前我们做动画需要一个定时器，每间隔多少毫秒就做出一些改变。现在有个好消息：浏览器厂商已经决定提供一个专门做动画的方法，即requestAnimationFrame()，而且基于浏览器的层面也能更好的进行优化。但是呢，这只是一个做动画的基础API，即不基于DOM元素的style变化，也不基于canvas，或者WebGL。所以，具体的动画细节需要我们自己写。我们为什么要用它？对于同时进行的n个动画，浏览器能够进 阅读全文
posted @ 2011-09-30 16:42 越己 阅读(4741) 评论(13) 推荐(3) 编辑
说好的缓动呢？
摘要：jQuery的缓动函数不给力，被逼自己写一个，既然要写，先把需求列好：1. 动画类型有：linear, easeIn, easeOut,easeInOut2. 可以在缓动过程中改变属性，也可以是调用函数，并改变函数的参数（后者是我的初衷，jq只支持属性，见当0碰上0）动画是怎样产生的？学过Flash的人应该知道帧，帧就是一个画面，通常一秒25帧，也就一秒播放25个画面，如此快速的放过去，静态也成了动态（当然，前提是25个画面不是同一个画面，囧。。。）难道做动画要画N多图，好吧，这叫“逐帧动画”，如果你很闲大可以这么干，因为这样做的效果绝对是顶级的，毫无瑕疵的。但是我一点都不闲，我画画的水平连幼 阅读全文
posted @ 2011-09-29 01:12 越己 阅读(2956) 评论(33) 推荐(10) 编辑
当0遇上0，拼人品的时候到了
摘要：话说取值习惯用a||b，当0遇上0，这句话就是一句废话！我的问题是这样的：首先页面有滚动条，滚动条位于初始位置（最顶上），然后我点击一个按钮，缓动到底部，这个时候，就会发生见鬼的0与0的对决。//jQuery代码function toBottom(){ var el = null, scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight), clientHeight = Math.min(document.documentElement.clientHeight, do.. 阅读全文
posted @ 2011-09-28 01:09 越己 阅读(2839) 评论(15) 推荐(0) 编辑
仿微博半透明边框
摘要：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> body { background:blue; } #box { width:300px; padding:5px; position:relative; } #alpha_bg { background:#f2f2f2; width:10 阅读全文
posted @ 2011-09-25 11:25 越己 阅读(1513) 评论(1) 推荐(0) 编辑
getBoundingClientRect()方法
摘要：原来只知道是获取元素的位置信息的，今天测试了一个功能，发现不是这么简单，见例子<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> #null { height:1300px; } #bottom { background:lightblue; height:100px; } </sty 阅读全文
posted @ 2011-09-13 15:03 越己 阅读(699) 评论(0) 推荐(0) 编辑
Event对象的5种坐标
摘要：使用鼠标事件经常碰到这样的需求，比如获取鼠标相对于事件源的位置，鼠标相对于事件源对象父元素的位置。。。但是你懂的，浏览器实在太不和谐了，兼容性且不说，各种坐标属性看得人头昏眼花，极容易混淆。好吧，我来总结一下：测试浏览器：IE8, Chrome13, FF8, Safari5, Opera11先上测试用例（用HTML5的doctype测试，也可看出未来的发展趋势，其他doctype可自行测试）：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=&q 阅读全文
posted @ 2011-09-10 22:58 越己 阅读(3265) 评论(4) 推荐(2) 编辑

点击右上角即可分享
微信分享提示