JS运动框架
2013-07-31 00:14
423 查看
/** * 使用offsetLeft,需注意margin的使用 * offsetLeft = margin-left + left; * offsetWidth= padding + border + width; * * @author Lonve */ function getStyle(elem,attr){ var result = null; result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem,false)[attr]; if(attr=="opacity"){ return parseInt(parseFloat(result)*100); } return parseInt(result); } var timer = null; //匀速运动停止条件--->距离足够近 function offsetMove1(offset){ var oDiv = document.getElementById("oDiv"); var speed = 0; speed = oDiv.offsetLeft < offset?10:-10; clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft >= offset){ //Math.abs(oDiv.offsetLeft - offset)<speed; clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed + "px"; } },30) } //缓动运动条件 1.变化的运动速度,最后速度为零 //问题:offsetLeft function offsetMove2(elem,offset){ clearInterval(elem.timer); var speed = 0; elem.timer = setInterval(function(){ speed = (offset - elem.offsetLeft)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); //是否到达到目标点 if(elem.offsetLeft == offset){ clearInterval(elem.timer); }else{ elem.style.left = elem.offsetLeft + speed + "px"; } },30) } //任意属性值 //避免小数值 parseInt(0.3*100) function offsetMove3(elem,attr,offset){ clearInterval(elem.timer); elem.timer = setInterval(function(){ var curAttr = getStyle(elem,attr); //当前属性值 var speed = (offset - curAttr)/8; //当前速度 speed = speed>0?Math.ceil(speed):Math.floor(speed); if(offset == curAttr){ clearInterval(elem.timer); }else{ if(attr=="opacity"){ elem.style.filter = "alpha(opacity="+(curAttr +speed)+")"; elem.style.opacity= (curAttr + speed)/100; }else{ elem.style[attr] = (curAttr + speed) + "px"; } } },30) } //链式运动 function offsetMove4(elem,attr,offset,fn){ clearInterval(elem.timer); elem.timer = setInterval(function(){ var curAttr = getStyle(elem,attr); var speed = (offset - curAttr)/8; speed = speed > 0? Math.ceil(speed):Math.floor(speed); if(offset == curAttr){ clearInterval(elem.timer); if(fn){ fn(); } }else{ if(attr=="opacity"){ elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")"; elem.style.opacity= (curAttr+speed)/100; }else{ elem.style[attr] = curAttr + speed + "px"; } } },30) } //多个属性同时变化 function offsetMove5(elem,json,fn){ var isStop = true; //所有值都到达 clearInterval(elem.timer); elem.timer = setInterval(function(){ //历遍json属性 for(var attr in json){ //1.取当前与速度 var offset = json[attr]; var curAttr = getStyle(elem,attr); var speed = (offset - curAttr)/8; speed = speed > 0? Math.ceil(speed):Math.floor(speed); //2.检测停止 if(offset!=curAttr){ isStop = false; } if(attr=="opacity"){ elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")"; elem.style.opacity= (curAttr+speed)/100; }else{ elem.style[attr] = curAttr + speed + "px"; } } //所有值都到达目标值,则停止 if(isStop){ clearInterval(elem.timer); if(fn){ fn(); } } },30); }
相关文章推荐
- js运动-完美运动框架
- JS完美运动框架
- js完美多物体运动框架(缓冲运动)
- js运动框架之侧边框
- JS完美运动框架详解——原理分析及demo
- 简单的JS运动框架
- 【原生JS组件】javascript 运动框架
- 原生JS实现图片无缝滚动方法(附带封装的运动框架)
- 运动框架改进之完美运动框架 -纯js
- js运动框架_包括图片的淡入淡出效果
- [JS思路]运动框架思路
- js实现多物体运动框架并兼容各浏览器
- (43)JS运动之链式运动框架
- JS中的完美运动框架
- JS-运动框架
- js 运动框架及实例
- 万能JS运动框架
- js完美运动框架,想得到的效果基本能做到
- 原生js实现时间版运动框架
- [js运动动画]运动之匀速运动框架