JavaScript实现鼠标经过图片时图片上下或左右抖动的动画效果

<!DOCTYPE html> <html lang="en"> <style type="text/css"> img { width: 100px; height: 100px; position: absolute; top: 200px; } </style> &l...
<!DOCTYPE html>
<html lang="en">
	<style type="text/css">
		img {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 200px;
		}
	</style>
	<body>
		<img src="http://www.duanlonglong.com//images/defaultpic.gif" alt="">
		<img src="http://www.duanlonglong.com//images/defaultpic.gif" alt="">
		<img src="http://www.duanlonglong.com//images/defaultpic.gif" alt="">
	</body>
	<script type="text/javascript">
		window.onload = function(){
		    var imgs = document.getElementsByTagName('img');
		
		    for(var i = 0;i<imgs.length;i++){
		        imgs[i].style.left = 80+i*110+'px';//让图片之间有缝隙
		        imgs[i].onmouseover = function(){//鼠标经过,图片上下抖动
		            shake(this,'top');//调用抖动函数
		        }
		    }
		
		    // ①封装获取某个元素的样式函数
		    function getStyle(obj,attr){//obj:你要获取谁,attr:所获取的对象的什么样式
		        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
		    }
		
		    // ②抖动函数
		    function shake(obj,attr,endFn){
		    //obj谁来抖动,attr是哪个元素值进行改变(横着抖,竖着抖),endFn回调函数(就是抖完之后干嘛)
		        // 先获得图片原来left值,在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字
		        var pos = parseInt(getStyle(obj,attr));
		        var arr = [];//20,-20,18,-18,16,-16,...存放抖动的频率
		        var shake = null;//开启定时器,因为动画doMove.js函数中也有定时器,为了避免重复
		        var num = 0;//一般只要有数组,那么必定有数字跟着变化;数组的第0个,第1个...
		
		        for(var i =20;i>0;i-=2){
		            arr.push(i,-i);
		        }
		        arr.push(0);
		        // alert(arr);//测试一下
		        // 有抖动的频率之后,要开启定时器让它进行抖动
		        clearInterval(obj.shake);//开启定时器之前要先把 定时器关闭,防止连续多次点击
		        obj.shake = setInterval(function(){
		            obj.style[attr] = pos + arr[num] + 'px';//原来的位置pos,加上数组中每一个数字
		            num++;
		            if(num === arr.length){//如果数字等于数组的长度(就是全部抖完了),关闭定时器
		                clearInterval(obj.shake);
		                // 看是否有回调函数,如果有就执行,没有就不执行
		                endFn&&endFn();                     
		            }
		        },80);
		    }
		}
	</script>
</html>

左右抖动只需要改一个地方

imgs[i].onmouseover = function(){//鼠标经过,图片上下抖动

 shake(this,'top');//调用抖动函数

 }

将里面的shake(this,'top');改为shake(this,'left');即可

attachments-2020-06-mgQT0xxy5ef76258ad218.gif

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章