修复图片移入移出抖动错位bug

最新推荐文章于 2023-01-12 00:00:06 发布

波克比520

最新推荐文章于 2023-01-12 00:00:06 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签：抖动函数

本文链接：https://blog.csdn.net/u011175410/article/details/50264527

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!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>

波克比520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
修复图片移入移出抖动错位bug

img{ width:150px; height:150px; position:absolute; top:50px; left:300px; } // 封装getStyle函数 function getStyle(obj, attr){ return obj.currentStyle ? o
复制链接

扫一扫