webJ

追求自由美好的生活

  • CSS3 box-shadow 实现描边字

    如果设计稿中有很多描边字,如果都切成图片将造成大量的图片素材,工作量大,加载速度慢,难维护。 今天才发现 CSS3 box-shadow 是可以实现描边字的,以前遇到描边字都是改成图片.... 现在好了,只怪我才慢知道 附上测试DEMO [crayon-5fcbc4d873a18551118360/]   再也不用去弄成图片了 不过box-shadow IE低版本不支持 而且还有性能问题,根据需求使用.. GET 新技能  
  • 用HTML5 requestAnimationFrame 替换 setTimeout 达到更好的动画效果

    requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在浏览器里提供这样一个API呢,这样一来我们可以为用户优化他们的动画。”所以,这个requestAnimationFrame()函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中。 使用requestAnimationFrame有什么好处? 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过requestAnimationFrame(),JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。 requestAnimationFrame的用法 简单的兼容   [crayon-5fcbc4d874813040908025/]   由于谷歌火狐浏览器为requestAnimationFrame 提供了支持,我相信以后 也会有o(opera)ms(IE)等支持 ?于是我们的函数就变成了这样 [crayon-5fcbc4d87481a400281621/]     对requestAnimationFrame更牢靠的封装 Opera浏览器的技术师Erik M?ller 把这个函数进行了封装,使得它能更好的兼容各种浏览器。你可以读一读这篇文章,但基本上他的代码就是判断使用4ms还是16ms的延迟,来最佳匹配60fps。下面就是这段代码,你可以使用它,但请注意,这段代码里使用的是标准函数,我给它加上了兼容各种浏览器引擎前缀。 [crayon-5fcbc4d87481d452890869/]   requestAnimationFrame API [crayon-5fcbc4d874821733086842/]   下面附上 2 个 requestAnimationFrame 的使用例子 [crayon-5fcbc4d874823726915634/]     [crayon-5fcbc4d874826637607584/]   各种浏览器对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-5fcbc4d874d13889927923/]  
  • 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/
1 2 3 4 5 6 12