2016-06-01 抖动
Posted 黑土白云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016-06-01 抖动相关的知识，希望对你有一定的参考价值。
1.点击图片实现抖动
<script src="js/domoveandgetstyle.js"></script>
<script>
window.onload=function(){
var img = document.getElementById("img");
var arr=[];//20 -20 18 -18 ...0
var num=0;//操作数组,一般要用到的下标
var timer=null;//取消定时器用
var postion=getStyle(img,\'left\');//获取img的当前位置
for(var i=20; i>0; i-=2){
arr.push(i,-i);
}
//alert(arr)//20 -20 18 -18 ...0
img.onclick=function(){//点击图片触发定时器
timer=setInterval(function(){
img.style.left=postion+arr[num]+\'px\';
num++;
if(num==arr.length){//如果到数组的末尾,清除定时器
clearInterval(timer);
}
},50);
}
}
</script>
</head>
<body>
<img id="img" src="images/photo_04.jpg" style="width: 400px ; height: 400px;position:absolute;left: 300px" />
</body>
2. domoveandgetstyle.js
/** * Created by ckang on 2016/6/1. */ function doMove(obj,attr,stepLength,target,animationVelocity){ stepLength=(getStyle(obj,attr)<target?stepLength:-stepLength);//如果obj所处的位置小于目标位置,则步长取正数,反之取负数 clearInterval(obj.timer); odiv.timer=setInterval(function(){ var speed =getStyle(obj,attr)+stepLength;//步长 if(speed>target && stepLength>0 || speed<target && stepLength<0){ speed=target; } obj.style[attr]=speed+\'px\';//每隔animationVelocity秒 移动stepLength px if(speed==target){//停止移动 clearInterval(obj.timer); } },animationVelocity); } function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30 拿到元素的属性的值 如位置等信息 return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ; }
以上是关于2016-06-01 抖动的主要内容，如果未能解决你的问题，请参考以下文章
Unity3D镜头抖动怎么做？比如发生爆炸后场景的抖动（用镜头抖动或者画面抖动实现），跪求高手回答！
C语言实现聊天工具钟的抖动窗口功能，代码很简单，思路也很简单