<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ margin: 0; padding: 0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; filter:alpha(opacity:30); opacity: 0.3; } </style> <script type="text/javascript"> window.onload = function(){ /*var aLi = document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].timer = null; aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200) } }*/ var Li1 = document.getElementById("li1"); var Li2 = document.getElementById("li2"); Li1.onmouseover = function(){ startMove(this,"opacity",100); } Li1.onmouseout = function(){ startMove(this,"opcity",30); } Li2.onmouseover = function(){ startMove(this,"width",400); } Li2.onmouseout = function(){ startMove(this,"width",200); } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//针对IE } else{ return getComputedStyle(obj,false)[attr];//针 对火狐 } } //var timer = null; //var alpha = 30 function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = 0; if(attr == "opacity"){ icur = parseFloat(getStyle(obj.arrt))*100; } else{ icur = parseInt(getStyle(obj,attr)); } var speed = (iTarget - icur)/8; speed = speed >0?Math.ceil(speed):Math.floor(speed); if(icur == iTarget){ clearInterval(obj.timer); } else{ if(attr == "opacity"){ obj.style.filter = "alpha(opacity:" + (icur + speed) + ")"; obj.style.opacity =(icur + speed)/100; } else{ obj.style[attr] = icur + speed + "px"; } } },30) } </script> </head> <body> <ul> <li id="li1"></li> <li id="li2"></li> </ul> </body></html>
添加回答
举报
0/150
提交
取消