(编辑:jimmy 日期: 2024/10/5 浏览:2)
本文实例讲述了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"btn1" type="button" value="运动"/> <div id="div1"></div> </body> </html>
更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。