webJ

追求自由美好的生活

  • 用HTML5 requestAnimationFrame 替换 setTimeout 达到更好的动画效果

    requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在浏览器里提供这样一个API呢,这样一来我们可以为用户优化他们的动画。”所以,这个requestAnimationFrame()函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中。 使用requestAnimationFrame有什么好处? 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过requestAnimationFrame(),JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。 requestAnimationFrame的用法 简单的兼容   [crayon-5d58935d8041f076534122/]   由于谷歌火狐浏览器为requestAnimationFrame 提供了支持,我相信以后 也会有o(opera)ms(IE)等支持 ?于是我们的函数就变成了这样 [crayon-5d58935d8042a704742354/]     对requestAnimationFrame更牢靠的封装 Opera浏览器的技术师Erik M?ller 把这个函数进行了封装,使得它能更好的兼容各种浏览器。你可以读一读这篇文章,但基本上他的代码就是判断使用4ms还是16ms的延迟,来最佳匹配60fps。下面就是这段代码,你可以使用它,但请注意,这段代码里使用的是标准函数,我给它加上了兼容各种浏览器引擎前缀。 [crayon-5d58935d8042d546436730/]   requestAnimationFrame API [crayon-5d58935d80431390927306/]   下面附上 2 个 requestAnimationFrame 的使用例子 [crayon-5d58935d80433290455005/]     [crayon-5d58935d80442998591809/]   各种浏览器对requestAnimationFrame的支持情况 谷歌浏览器,火狐浏览器,IE10+都实现了这个函数,即使你的浏览器很古老,上面的对requestAnimationFrame封装也能让这个方法在IE8/9上不出错。 Android 貌似要4.2 以上才能支持 ,要注意 相关文章 http://www.zhangxinxu.com/study/201309/requestanimationframe-tween-easeoutbounce.html? DEMO http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/  
  • 使用HTML5 canvas 渲染图片 替换img 达到开启 手机 GPU 加速的效果

    手机上没有兼容性问题,PC ie9+ [crayon-5d58935d813a8418815858/]  
  • JavaScript 中 undefined 与 undeclared 之间的区别是什么?

    今天看到这个问题.. undeclared 是说变量在使用前未声明,而undefined是说变量虽已声明,但类型未知。 根本的区别在于,undefined是Js语言类型,而undeclared却是一种Js语法错误吧。
  • 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题

    这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代码如下,很简单,自行修改调试即可: html{ _background:url(about:blank); /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ } /* 你的图层 */ .positionFixedLayer{ position:fixed; _position: absolute; _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight); _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth-200);     转载自AlloyTeam:http://www.alloyteam.com/2012/06/five-lines-of-code-perfect-solution-flashing-problem-from-ie6-to-the-chrome-browser-the-position-fixed/
  • shtml 介绍及让apache支持shtml 文件

    shtml是一种基于SSI技术的文件,也就是Server Side Include--SSI 服务器端包含指令,一些Web Server如果有SSI功能的话就会对shtml文件特殊对待,服务器会先扫一次shtml文件看没有特殊的SSI指令存在,如果有的话就按Web Server设定规则解释SSI指令,解释完后跟一般html一起调去客户端。 html或htm与shtml或shtm的关系是什么 html或者htm是一种静态的页面格式,也就是说不需要服务器解析其中的脚本,或者说里面没有服务器端执行的脚本,而shtml或者shtm 由于它基于SSI技术,当有服务器端可执行脚本时被当作一种动态编程语言来看待,就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。 如何使你的Apache服务器支持SSI? Apache默认是不支持SSI的,需要我们更改httpd.conf来进行配置。我这里以windows平台的Apache 2.0.x为例,打开conf目录下的httpd.conf文件,搜索“AddType text/html .shtml”,搜索结果: # AddType text/html .shtml # AddOutputFilter INCLUDES .shtml 把这两行前面的#去掉。 然后搜索“Options Indexes FollowSymLinks” 在搜索到的那一行后面添加“ Includes” 即将该行改变为 Options Indexes FollowSymLinks Includes 保存httpd.conf,重起apache即可。到此我们就完成了对Apache SSI的设置 调用例如 [crayon-5d58935d81e1f063379934/]     这段代码在shtml 文件中 不会被认为是注释 亲测有效  
1 2 3 4 5 6 12