完美运动框架(js)
生活随笔
收集整理的这篇文章主要介绍了
完美运动框架(js)
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
一、前言
学习js运动时，由于在实现多种不同运动效果过程中很多代码是重复的，故将其封装达到代码重用。
二、代码封装重用
function startMove(obj, json, fnEnd){clearInterval(obj.timer);//若物体之前开有定时器则先关闭 obj.timer = setInterval(function(){var bStop = true; //假设所有的属性值运动到了目标值for(var attr in json){//遍历物体传过来的json值var start = 0;if(attr === 'opacity'){//透明度start = Math.round(parseFloat(getStyle(obj, attr))*100);}else{//非透明度属性start = parseInt(getStyle(obj, attr));}if(start != json[attr]){//若有属性值未运动到目标值，将bStop的值赋为falsebStop = false;}var speed = (json[attr] - start)/6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//速度为正值向上取整，速度为负值向下取整if(attr === 'opacity'){obj.style.filter = 'alpha(opacity:'+ (start + speed) +')';//IE浏览器obj.style.opacity = (start + speed)/100;//非IE浏览器}else{obj.style[attr] = start + speed + 'px';}}if(bStop){//所有的属性值都运动到了目标值,则关闭定时器并执行回调函数 clearInterval(obj.timer);if(fnEnd)fnEnd();}}, 30); }function getStyle(obj, attr){//获取当前属性的值if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj, false)[attr];} }三、测试并结果分析
将上面封装的代码保存为moveFrame.js文件，并导入如下测试代码中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title完美运动框架应用举例(满足多个属性值同时运动)</title><style type="text/css">#one{width: 100px;height: 100px;background-color: red;filter:alpha(opacity:40);opacity: 0.4;}</style><script type="text/javascript" src="moveFrame.js"></script><script type="text/javascript">window.onload = function(){var oBtn = document.getElementById('btn');var oDiv = document.getElementById('one');oBtn.onclick = function(){startMove(oDiv, {'width' : 200, 'height' : 400, 'opacity' : 100}, function(){alert('successful');});};};</script> </head> <body><input type="button" id="btn" value="多属性值同时运动"><div id="one"></div> </body> </html>测试结果为：chrome、FF、IE6+、Opera、Safari结果都一致。
四、总结
不管做什么特效，如图片轮播、滑动门特效、淡入淡出等，凡与运动相关都可以直接引入此框架。
本人前端菜鸟，希望这篇文章能对大家有所启发，文中有误导大家的地方，希望大伙海涵并给予指正。如果您觉得文章对您有所帮助，您的留言和推荐将对我是莫大的鼓舞！
此文章发布在本人博客园Developer_chang，如需转载本文，请注明来源： http://www.cnblogs.com/changjianqiu/
转载于:https://www.cnblogs.com/changjianqiu/p/4320814.html
总结
以上是生活随笔为你收集整理的完美运动框架(js)的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 骑电瓶车需要戴头盔吗？
- 下一篇： [转载]我看到的最好的解释Angular