2. it
  3. js 运动框架及实例

js 运动框架及实例

mac2022-06-30  27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>运动框架</title> <script src="move.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ move(oDiv,'right',300); //可使 //move(oDiv,'left',300); //可使 //move(oDiv,'top',300); //可使 //move(oDiv,'width',300); //可使 //move(oDiv,'height',300); //可使 } oDiv.onmouseover = function(){ move(oDiv,'opacity',100); } oDiv.onmouseout = function(){ move(oDiv,'opacity',30); } } </script> </head> <body> <input type="button" id="btn1" value="运动" /> <div id="div1" style="width:200px;height:200px;position:absolute;background:red;filter:alpha(opacity=30);opacity:0.3;"> </div> </body> </html>

 

js：

//height，left , top ,right ，opacity var timer = null function move(obj,attr,target) { //开启定时器 timer = setInterval(function(){ var current = 0; if(attr=="opacity") { current = Math.round(parseFloat(getStyle(obj,attr))*100); } else { current = parseInt(getStyle(obj,attr)); } var speed = target>current ? 6 :-6; if(Math.abs(current-target)<6) { //清除定时器 clearInterval(timer); } else { if(attr=="opacity") { obj.style.filter = "alpha(opacity:"+(current + speed) +")"; obj.style.opacity = (current + speed) /100; } else { obj.style[attr] = current + speed +"px"; } } },30); } function getStyle(obj,attr) { if(obj.currentStyle) //用于IE { return obj.currentStyle[attr]; } else { //document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法 return document.defaultView.getComputedStyle(obj, null)[attr]; //getComputedStyle DOM1中的方法 //return getComputedStyle(obj,false)[attr]; } }

 

转载于:https://www.cnblogs.com/zoro-zero/p/4329371.html

相关资源：JS运动特效之完美运动框架实例分析
最新回复(0)