<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;} ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: red; margin-bottom: 20px; border: 4px solid black; } </style> <script type="text/javascript"> window.onload=function(){ var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); li1.timer=null; li2.timer=null; li1.onmouseover=function(){ startMove(this,'width',400); li1.onmouseout=function(){ startMove(this,'width',200); } li2.onmouseover=function(){ startMove(this,'height',400); li2.onmouseout=function(){ startMove(this,'height',100); } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=parseInt(getStyle(obj,attr)); var speed = (iTarget-icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer) } else{ obj.style[attr]=icur+speed+'px'; } },30); } </script> </head> <body> <ul> <li id="li1"></li> <li id="li2"></li> </ul> </body> </html>
gothClaudia
相关分类