时间:2021-05-26
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例总结了javascript运动效果实现与用法。分享给大家供大家参考,具体如下:一、图片放大缩小效果:图片放大缩小*{margin:0;padding:0
本文实例讲述了javascript弹性运动效果简单实现方法。分享给大家供大家参考,具体如下:弹性运动实现原理:加速运动+减速运动+摩擦运动运行效果截图如下:实例
javascript缓冲运动框架的实现框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架。实例代码:/***Createdbywangon201
本文实例讲述了JS实现网页表格自动变大缩小的方法。分享给大家供大家参考。具体分析如下:这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化
本文实例讲述了JavaScript实现的浮动层框架用法。分享给大家供大家参考。具体如下:这是一个JavaScript编写的浮动层框架,作为框架来说,骨干已经完成