一、HTML
二、CSS
img{
margin: 10px;
width:200px;
height:300px;
float: left;
}
三、script
window.onload=function(){
var aImg=document.getElementsByTagName('img');
for (var i = 0; i < aImg.length; i++) {
aImg[i].timer=null;
aImg[i].onmouseover=function(){
startMove(this,500);
}
aImg[i].onmouseout=function(){
startMove(this,300);
}
};
}
function startMove(obj,iTarget){
clearInterval(obj.timer);
// 对每个对象设置定时器
obj.timer=setInterval(function(){
var iSpeed=(iTarget-obj.offsetHeight)/8;
var iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if (obj.offsetHeight==iTarget) {
clearInterval(obj.timer);
}
else{
obj.style.height=obj.offsetHeight+iSpeed+'px';
}
},30)
}
四、效果图
