前端特效（5）--涟漪

最新推荐文章于 2021-09-21 12:33:13 发布

月亮很亮(ง •̀_•́)ง

最新推荐文章于 2021-09-21 12:33:13 发布

阅读量363

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_43722072/article/details/104410886

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

利用jquery和Velocity实现随机涟漪的效果

主要知识点：

要使用Velocity首先要引入它，如果想与JQ配合使用注意要先引入JQ再引入Velocity
Velocity 接收一个或更多的参数，只有第一个参数是是强制要求的，它可以是一个命令（如"scroll"），或者是由CSS属性值组成的对象（这些值是动画的目标值）；第二个参数是由动画附加选项组成的对象，比如过渡时长，张弛度，延时还有回调函数：

$element.velocity({ left: “500px” }, { delay: 1000, duration
:500,easing:[ 1000, 40 ],complete:function(){alert(123)}});

具体可搜索Velocity.js的方法的使用，治理只做大概的介绍
设置一些CSS3变换，允许你做一些2D或3D的动画，比如平移，扩大，旋转。注意不会影响元素在网页中的位置，也不会影响周围的元素在页面中的位置。 Velocity支持下面的变换：translateX: 从左向右沿x轴移动元素；translateY: 从上到下沿y轴移动元素；rotateZ: 关于z轴旋转元素；rotateX: 关于x轴旋转元素（看起来由里向外）；rotateY: 关于y轴旋转元素（由左到右）；scaleX: 成倍数改变元素宽度；scaleY: 成倍数改变元素高度
用setInterval和 clearInterval控制涟漪效果的关闭和开启

主要代码：

div的样式：
    <style>
    div{
        width: 1px;
        height: 1px;
        /* background-color: red; */
        position: fixed;
        /* left: 300px; */
        /* top: 240px; */
        border-radius: 50%;
        z-index: -1;
    }
    </style>

<body>
    <!-- <div></div> -->
    <button>开启</button>
    <button>关闭</button>
    <script src="jquery-1.10.1.min.js"></script>
    <script src="velocity.min.js"></script>
    <script>
        // 开启计时器，每隔0.1s随机创建div  随机数量 颜色 位置
    // $(document).click(function(){
    //     $("div").velocity({
    //         "scaleX":150,
    //         "scaleY":150,
    //         "backgroundColorAlpha":0,
    //     },1000)
    // }) 
    var timer = null;
    var iW = null;
    var iH = null;
    $("button").eq(0).click(function (){
        iW = document.documentElement.clientWidth;
        iH = document.documentElement.clientHeight;
        timer = setInterval(lianyi,200);
    })
    $("button").eq(1).click(function (){
        clearInterval(timer);
    })
    function lianyi(){
        for(var i=0;i<Math.round(Math.random()*2+3);i++){
            var oDiv = $("<div>").appendTo($("body"));
            var rR = Math.round(Math.random()*255);
            var rG = Math.round(Math.random()*255);
            var rB = Math.round(Math.random()*255);
            oDiv.css({
                "backgroundColor" : `rgb(${rR},${rG},${rB})`,
                "left" : Math.random()*iW,
                "top" : Math.random()*iH,          
            }).velocity({
                "scaleX" : 150,
                "scaleY" : 150,
                "opacity" : 0,
            },{
                "duration" : 1000,
                "complete" : function (){
                    $(this).remove();
                }
            })
        }
    }

    
    </script>
</body>

效果：
点击“开启”（此处为动画效果）
在这里插入图片描述

月亮很亮(ง •̀_•́)ง

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端特效（5）--涟漪

利用jquery和Velocity实现随机涟漪的效果主要知识点：要使用Velocity首先要引入它，如果想与JQ配合使用注意要先引入JQ再引入VelocityVelocity 接收一个或更多的参数，只有第一个参数是是强制要求的，它可以是一个命令（如"scroll"），或者是由CSS属性值组成的对象（这些值是动画的目标值）；第二个参数是由动画附加选项组成的对象，比如过渡时长，张弛度，延时还有...
复制链接

扫一扫

专栏目录