欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js中抖动的实现原理(附代码)

程序员文章站 2022-04-17 08:23:00
...
本篇文章给大家带来的内容是关于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中对执行上下文以及变量对象的解析

js中字符方法以及字符串操作方法的总结(附代码)

以上就是js中抖动的实现原理(附代码)的详细内容,更多请关注其它相关文章!

相关标签: js中抖动