<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>任意值属性 多物体宽高</title> <style> ul,li{ list-style: none; } li{ width:200px; height:100px; background-color: yellow; margin:10px; border:4px solid #f00; } </style> <script> window.onload=function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(Li1,'height',400); }; Li1.onmouseout = function(){ startMove(Li1,'height',100); }; Li2.onmouseover = function(){ startMove(Li2,'width',400); }; Li2.onmouseout = function(){ startMove(Li2,'width',200); } }; 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(icur == iTarget){ clearInterval(obj.timer); }else{ obj.style[attr] = icur + speed + 'px'; } },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <ul> <li id="li1"></li> <li id="li2"></li> </ul> </body> </html>
