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');即可
- 发表于 2020-06-27 23:14
- 阅读 ( 552 )
- 分类：web前端开发
