<!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> | |
<style> | |
li{ | |
width:200px; | |
height:100px; | |
background:red; | |
float: none; | |
left:0; | |
top: 0; | |
margin-bottom: 20px; | |
} | |
</style> | |
<script type="text/javascript"> | |
window.onload=function(){ | |
var oli=document.getElementsByTagName('li'); | |
for( var i=0;i<oli.length;i++) | |
{oli[i].onmouseover=function(){ | |
startmove(400,"width",5); | |
} | |
oli[i].onmouseout=function(){ | |
startmove(200,"width",-5); } | |
} | |
var oli[i].timer=null; | |
function startmove(oli[i],itarget,khg,speed){ | |
clearInterval(oli[i].timer); | |
oli[i].timer=setInterval(function(){ | |
if (oli[i].style[khg]==itarget+"px") { | |
clearInterval(oli[i].timer); | |
}else{ | |
oli[i].style[khg]=parseInt(SBFH(oli[i],khg))+speed+'px'; | |
} | |
},30)} | |
function SBFH(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> |
一毛钱
相关分类