首页 > 代码库 > 简单抖动函数

简单抖动函数

2024-08-21 15:56:24   219人阅读

要实现一个元素的抖动的基本思想：

先构建一个存储抖动位置的数组，例如：[20,-20,18,-18.........2,-2,0]。把这个数组的每一项依次与元素的属性的当前值相加并应用到元素上，就可以实现抖动。

语法：shake(obj,attr,pos,endFn)

obj是对象

attr是对象要震动的属性

pos是对象未抖动之前的属性的值

endFn是回调函数

构建抖动数组：

1                 //产生抖动的原因：用这些数组中的项改变对象的属性值
2                 for(var i=20;i>0;i-=4){
3                     arr.push(i,-i);
4                 }
5                 //添加0即让图片归位
6                 arr.push(0);

主要抖动函数：

 1                 clearInterval(obj.shake);
 2                 obj.shake = setInterval(function(){
 3                     obj.style[attr] = pos + arr[num] + ‘px‘;
 4                     num++;
 5                     if(num == arr.length){
 6                         clearInterval(obj.shake);
 7                         //为了不刷新页面能再次点击
 8                         num = 0;
 9                         //如果回调函数存在，执行
10                         endFn && endFn();
11                     }
12                 },60);

一般都是给定时器命名为timer，这里为了防止和其他函数命名冲突，故使用obj.shake。这里的pos变量是元素未抖动时属性的值（解决多次抖动图片，图片位置会变化的bug），先将数组的第num项与元素的初始值相加，num++,如果跑完了抖动数组则取消抖动，如果有回调函数则执行。

源码：

 1             function shake(obj,attr,pos,endFn){
 2                 // var pos = parseInt(getStyle(obj,attr));//有隐患
 3                 //定时器初定义
 4                 var shake = null;
 5                 var arr = [];
 6                 var num = 0;
 7                 //产生抖动的原因：用这些数组中的项改变对象的属性值
 8                 for(var i=20;i>0;i-=4){
 9                     arr.push(i,-i);
10                 }
11                 //添加0即让图片归位
12                 arr.push(0);
13 
14                 clearInterval(obj.shake);
15                 obj.shake = setInterval(function(){
16                     obj.style[attr] = pos + arr[num] + ‘px‘;
17                     num++;
18                     if(num == arr.length){
19                         clearInterval(obj.shake);
20                         //为了不刷新页面能再次点击
21                         num = 0;
22                         //如果回调函数存在，执行
23                         endFn && endFn();
24                     }
25                 },60);
26             }

应用：实现图片鼠标移上去抖动的小效果

源码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 7     <script src="http://www.mamicode.com/shake.js"></script>
 8     <style>
 9 
10         img{
11             width: 200px;
12             height: 200px;
13             position: absolute;
14             top: 50px;
15             left: 100px;
16         }
17         #oImg2{
18             left:300px;
19         }
20     </style>
21 </head>
22 <body>
23 <img src="http://www.mamicode.com/img/1.jpg" />
24 <img src="http://www.mamicode.com/img/2.jpg" />
25 <img src="http://www.mamicode.com/img/3.jpg" />
26 <img src="http://www.mamicode.com/img/4.jpg" />
27 <img src="http://www.mamicode.com/img/5.jpg" />
28 <img src="http://www.mamicode.com/img/6.jpg" />
29 
30     <script>
31         window.onload = function(){
32             var oImg = document.getElementsByTagName(‘img‘);
33 
34             //为每个img添加时间和样式
35             for(var i=0;i<oImg.length;i++){
36                 oImg[i].style.left = 80 + i*210 + ‘px‘;
37                 //记录img还没有抖动之前的最初值，防止多次滑入图片会导致图片错位的bug
38                 oImg[i].pos = parseInt(getStyle(oImg[i],‘top‘));
39 
40                 oImg[i].onmouseover = function(){
41                     //传入对象，属性，最初值
42                     shake(this,‘top‘,this.pos);
43                 }
44             }
45         }
46     </script>
47 </body>
48 </html>

 

简单抖动函数


联系
我们