当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script src= "doMove.js" ></script>
<script>
window.onload = function (){
var img1 = document.getElementById( 'img1' );
img1.onclick = function (){
var pos = parseInt(getStyle(img1, 'left' ));
var arr = [];
var timer = null ;
var num = 0;
for ( var i =20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0);
clearInterval(timer);
timer = setInterval( function (){
img1.style.left = pos + arr[num] + 'px' ;
num++;
if (num === arr.length){
clearInterval(timer);
}
},50);
}
}
</script>
|
说明:
1、要先引入我们原来封装好的动画函数doMove.js,getStyle()函数就是这个函数里面的函数;
2、parseInt( )是把300px的单位去掉只留数字300;
3、上下抖动,只要把left改为top就可以。
以上就是如何实现图片抖动效果的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
html中如何设置不可点击
css样式属性是什么
css怎么让li强制不换行
css怎么设置字体颜色大小
react中图片用什么标签
css resize属性怎么用
外部css样式不生效怎么办
html和css实现字体加粗的三种方法
css vertical-align属性怎么用
css怎么设置阴影效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何实现图片抖动效果