<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
img{
width: 500px;
height: 300px;
}
#div1 div{
height: 30px;
overflow: hidden;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var adiv=div1.getElementsByTagName('div');
for(var i=0;i<adiv.length;i++){
adiv[i].onmouseover= function () {
domove(this,'height',20,300);
};
adiv[i].onmouseout= function () {
domove(this,'height',20,30);
};
}
function domove(obj,attr,dir,itarget){
dir=parseInt(getStyle(obj,attr))<itarget?dir:-dir;
clearInterval( obj.timer);
obj.timer=setInterval(function () {
var speed=parseInt(getStyle(obj,attr))+dir;
if(speed>itarget && dir>0){
speed=itarget;
}
if(speed<itarget && dir<0){
speed=itarget;
}
obj.style[attr]=speed+'px';
if(speed==itarget){
clearInterval(obj.timer);
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
<div id="div1">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
网友评论