计时器之抖动

最新推荐文章于 2024-07-05 09:50:50 发布

Doris ampson

最新推荐文章于 2024-07-05 09:50:50 发布

阅读量760

点赞数 1

分类专栏： js学习

本文链接：https://blog.csdn.net/qq_34376264/article/details/77752746

版权

js学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.抖动的实现原理：
a.通过获取元素的位置left，用定时器改变left;
b.把一组数据（改变left的），比如16,-16,14,-14….0存到数组里
c.然后开个计时器把数组里的数字分别与原left值计算赋给left.最后数组走完的时候把计时器关闭

代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:100px; height:100px; background-color:red; position:absolute; left:40px; top:40px;}
</style>
</head>
<body>
<input type="button" value="抖起来" id="btn"/>
<div id="div1"></div>
<script>
var arr=[]; 
for(var i=16;i>0;i-=2){
    arr.push(i,-i);
    } 
arr.push(0);
var onOff = true;
$('btn').onclick = function(){
    if(onOff){
        clearTimeout($('div1').timer2);
        var nowLeft = parseInt(getStyle($('div1'),'left'));
        var i = 0;
        clearInterval($('div1').timer1);
        $('div1').timer1 = setInterval(function(){
            doMove($('div1'),16,arr[i]+nowLeft,'left');
            if(i == arr.length-1){
                clearInterval($('div1').timer1);
            }else{
                i++;
            }
        },60)
    onOff = false;
    $('div1').timer2 = setTimeout(function(){
        onOff = true;
    },60*(arr.length+1))//此处代码是为了可以重复多次地实现点击后出现抖动效果；“60*(arr.length+1))”是约束在完成一次抖动全过程之后，下一次抖动才可发生；这可以避免因为多次点击从而引起位置错乱的问题
    }

}
function $( v ){//$为函数名
    if( typeof v === 'function' ){
        window.onload = v;
    } else if ( typeof v === 'string' ) {
        return document.getElementById(v);
    } else if ( typeof v === 'object' ) {
        return v;
    }
}
function getStyle( obj, attr ){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
function doMove(id,speed,where,howTo,endFn){
    speed = parseInt(getStyle( id, howTo ))> where ? -speed : speed;
    clearInterval(id.timer);
    id.timer=setInterval(function(){
        var nowLeft = parseInt(getStyle( id, howTo ));
        var thisLeft = nowLeft+ speed;
        if(thisLeft >=where&&speed>0||thisLeft <=where&&speed<0){
            thisLeft=where;
        }
        id.style[howTo] = thisLeft+'px';
        if(parseInt(getStyle( id, howTo ))===where){
            clearInterval(id.timer);
            endFn&&endFn();
        }
    },30)
}   
</script>
</body>
   
   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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
   
   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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68