javascript运动框架用法实例分析（实现放大与缩小效果）

本文实例讲述了javascript运动框架用法。分享给大家供大家参考，具体如下：
该运动框架可以实现多物体任意值运动
运行效果截图如下：

例子：

<！doctype html><html><head><meta charset="utf-8"><title>运动框架</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha（opacity=30）;}</style><script>window.onload = function（）{ var oBtn = document.getElementById（"btn1"）; var oDiv = document.getElementById（"div1"）; oBtn.onclick = function（） { startMove（oDiv, {width:200, height:200, opacity:100}, function（）{startMove（oDiv, {width:100, height:100, opacity:30}）; }）; };};function getStyle（obj, attr）{ if（obj.currentStyle）{ return obj.currentStyle[attr];}else{ return getComputedStyle（obj, false）[attr]; }}function startMove（obj, json, fn）{ clearInterval（obj.timer）; obj.timer = setInterval（function（）{ var bStop = true; for（var attr in json）{var iCur = 0;if（attr == "opacity"）{iCur = Math.round（parseFloat（getStyle（obj, attr））*100）;}else{iCur = parseInt（getStyle（obj, attr））;}var iSpeed = （json[attr] - iCur）/8;iSpeed = iSpeed>0?Math.ceil（iSpeed）:Math.floor（iSpeed）;if（iCur ！= json[attr]）{bStop = false;}if（attr == "opacity"）{obj.style.filter = "alpha（opacity="+（iCur+iSpeed）+"）";obj.style.opacity = （iCur+iSpeed）/100;}else{obj.style[attr] = iCur + iSpeed + "px";} } if（bStop）{clearInterval（obj.timer）;if（fn）{fn（）;} } }, 30）;}</script></head><body><input id="btn1" type="button" value="运动"/><div id="div1"></div></body></html>

更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。