首页 > 代码库 > 抖起来的图片
抖起来的图片
function shake(obj,attr,endfn){ if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +‘px‘; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50);};
function getstyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>img{ position:absolute; top:200px; width:150px; height:100px; }</style><script src="http://www.mamicode.com/float.js"></script><script>window.onload = function (){ var oimg = document.getElementsByTagName(‘img‘); for(var i = 0; i< oimg.length; i++ ) { oimg[i].style.left = 20 + i * 160 + ‘px‘; oimg[i].onmouseover = function() { shake(this,‘top‘) }; } } </script></head><body><img src="http://www.mamicode.com/img/5-1.jpg"><img src="http://www.mamicode.com/img/5-2.jpg"><img src="http://www.mamicode.com/img/5-3.jpg"><img src="http://www.mamicode.com/img/5-4.jpg"><img src="http://www.mamicode.com/img/5-5.jpg"></body></html>
抖起来的图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。