<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding:0;margin:0;}
li{list-style:none;}
div{width:100px;height:100px;background:#000;position:absolute;left:300px;top:300px;}
</style>
<script>
window.onload=function() {
var oInp=document.getElementsByTagName('input')[0];
var oDiv=document.getElementsByTagName('div')[0];
var timer=null;
var sty = parseInt(oDiv.currentStyle?oDiv.currentStyle.left:getComputedStyle(oDiv,0).left);
var num=0;
oDiv.onclick=function(){
clearInterval(timer);
var arr=[];
for(var i=30;i>0;i-=2){
arr.push(i,-i)
}
arr.push(0);
timer=setInterval(function(){
oDiv.style.left=sty+arr[num]+'px';
num++;
if(num==arr.length){clearInterval(timer);num=0}
},50)
}
}
</script>
<body>
<div></div>
</body>
</html>
js 抖动
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:js 添加删除元素 留言案例
下一篇:js 点击div运动动画传参
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
js函数节流和去抖动
1.搜索框的事件监听类似百度的那种自动
搜索 回调函数 百度 -
Flutter抖动动画、颤抖动画、Flutter文字抖动效果
Flutter输入框的抖动效果,实现文字的抖动
Flutter抖动动画 Flutter文字抖动 Flutter颤动动画 github flutter -
内存抖动
内存抖动是指在短时间内有大量的对象被创建或者被回收的现象。 内存抖动出现原因主要是频繁(很重要)在循环里创
创建对象 垃圾回收机制 垃圾回收