JS StartMove源码-简单运动框架
这几天学习js运动应用课程时,开始接触一个小例子:“仿Flash的图片轮换播放器”,其中使用的StartMove简单运动框架我觉得挺好用的。这个源码也简单,理解其原理,自己敲即便也就熟悉了。
用的时候,将下列代码放在一个js文件,如move.js。然后使用的时候引入该文件。如<script src="move.js"></script>
function getStyle(obj,name){ //获取对象的样式 if(obj.currentStyle){ //考虑浏览器问题,采用if判断获取当前对象的样式 return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,attr,Target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = 0; if(attr=='opacity') { //像素本身是小数类型的,所以用Math.round取整,这里乘100,下面使用这个参数的时候会进行除100. cur = Math.round(parseFloat(getStyle(obj,attr))*100); } else { cur = parseInt(getStyle(obj,attr)); } var spped = (Target-cur)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(Target==cur) { clearInterval(obj.timer); } else { //因为obj.style[attr]=cur+speed+'px';语句不适用opacity,所以要判断 if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE兼容 obj.style.opacity=(cur+speed)/100; //火狐兼容 } else { obj.style[attr]=cur+speed+'px'; } } },30 ); }
人真是一种有趣的生物。