<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style type="text/css">
img{ width:150px; height:150px; position:absolute; top:50px; left:300px;
}
</style>
<script>
// 封装getStyle函数
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
};
// 封装shake函数
function shake(obj ,attr ,pos ,endFn){ //shake( 对象,属性,原点,回调 );
var arr = [];
var num = 0;
var timer = null;
for( var i = 20; i > 0; i-=2){
arr.push(i, -i);
}
arr.push(0);
clearInterval(obj.timer);
obj.timer = setInterval(function(){
obj.style[attr] = pos + arr[num] + 'px';
num ++;
if(num > arr.length){
clearInterval(obj.timer);
endFn && endFn();
}
},20);
};
window.onload = function(){
var aImg = document.getElementsByTagName('img');
for(var i = 0; i < aImg.length; i++){
aImg[i].style.left = 30 + i*170 + 'px';
}
for(var i = 0; i < aImg.length; i++){
aImg[i].pos = parseInt(getStyle(aImg[i],'left'));
aImg[i].onmouseover = function(){
shake(this,'left',this.pos);
};
}
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</body>
</html>
修复图片移入移出抖动错位bug
最新推荐文章于 2020-12-28 19:36:59 发布