js中抖动的实现原理（附代码）

来源：动视网责编：小采时间：2020-11-27 19:32:22

js中抖动的实现原理（附代码）

js中抖动的实现原理（附代码）:本篇文章给大家带来的内容是关于js中抖动的实现原理（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。实现原理抖动的实现原理其实就是让节点元素进行位置的偏移，所以在实现此功能的时候最好节点元素进行绝对定位，然后来修改它

推荐度：

点击下载本文 文档为doc格式

导读js中抖动的实现原理（附代码）:本篇文章给大家带来的内容是关于js中抖动的实现原理（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。实现原理抖动的实现原理其实就是让节点元素进行位置的偏移，所以在实现此功能的时候最好节点元素进行绝对定位，然后来修改它

本篇文章给大家带来的内容是关于js中抖动的实现原理（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

实现原理

抖动的实现原理其实就是让节点元素进行位置的偏移，所以在实现此功能的时候最好节点元素进行绝对定位，然后来修改它们的top和left值。
这里有几个要点，第一是要准备好需要偏移的频率，这个可以通过把偏移距离放到数组中来控制偏移距离，偏移距离跳动幅度越小，效果就越平稳。定时器时间决定了节点抖动的速度。

代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Made with Thimble</title>
 <link rel="stylesheet" href="style.css">
 <style>
 img{
 width:300px;
 height: 400px;
 position:absolute;
 top:20px;
 left:150px;
 }
 </style>
</head>
<body>
<img id="img1" src="https://newimg.uumnt.cc:8092/Pics/2017/0622/03/06.jpg">
</body>
<script>
 var oImg = document.getElementById('img1');
 oImg.onclick = function(){
 //this 到函数里面作用域会变，这里赋值先变成局部
 var that = this;
 shaking(that,'top',function(){
 shaking(that,'left');
 });
 };

 // 抖动函数封装 attr：left水平抖动 top：垂直抖动
 function shaking(obj,attr,callback){
 var pos = parseInt(getStyle(obj,attr));
 var arr = [];
 var num = 0;
 for(var i=20;i>0;i-=2){
 arr.push(i,-i);
 }
 arr.push(0);
 clearInterval(obj.shaking);
 obj.shaking = setInterval(function(){
 obj.style[attr] = pos + arr[num] + 'px';
 num ++;
 if(num === arr.length){
 clearInterval(obj.shaking);
 callback && callback();
 }
 },50);
 }

 // 获取节点对象的样式属性值
 function getStyle(obj,attr){
 if(obj.currentStyle){
 return obj.currentStyle[attr];
 }else{
 return window.getComputedStyle(obj,false)[attr];
 }
 }
</script>
</html>

js中抖动的实现原理（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：原理实现代码

热门焦点

js中抖动的实现原理（附代码）

js中抖动的实现原理（附代码）

实现原理

js中抖动的实现原理（附代码）

最新推荐

猜你喜欢

热门推荐