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

2019-11-20 10:50:04

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

下一篇：jquery实现简单的遮罩层