原生JS实现缓动的小球案例

缓动的小球:就是当鼠标移动到小球内,小球随着鼠标的移动,小球跟着移动,而且小球会有很多,跟随者第一个小球接着运动。要实现这样的效果也就是要有以下的操作:

1.小球的缓存移动其实就是有很多小球(div),他们每个小球的出发点和目的点都是一样的,只是控制间隔时间再运动。

2.再用for循环分别获取到每个小球,使每次读取到的i(数组下标)和间隔的一个关系:50*i.


要移动div形成美丽的变化,其实每个div的出发点和目的点是一样的,
*只需要改变他们之间发生的间隔。
* for遍历每次每次鼠标移动后的每一个div都去间隔定时发生stylelefttop的改变
* 另外注意一下let操作
(50*i.)这个关系很重要,详解:

也就是我第一个小球(第一个遍历的小球,i为0的下标)花了 0*50=0 毫秒的时间开始随着鼠标进行运动

然后我第二个小球(第二个遍历的小球,i为1的下标)花了 1*50=50 毫秒的时间开始随着鼠标进行运动,比第一个小球晚了50毫妙进行运动

···················

但是他们的出发点和目的点都是一样的,所以,会产生缓动的效果。


源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动的小球</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            background-color: hotpink;
            position: absolute;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    /*我对整个文档进行MouseMove事件,left和top变量是指鼠标移动的那个点参照于浏览器的那个距离
    * 在这里我把鼠标设置为始终在小球的中心,不管开始第一下鼠标点击点在小球的哪里,在移动中始终在小球中心
    * */
    var divs=document.getElementsByTagName("div");
    document.onmousemove=function (event) {
        var left=event.clientX;
        var top=event.clientY;
        /*这里是核心,要移动div形成美丽的变化,其实每个div的出发点和目的点是一样的,
        *只需要改变他们之间发生的间隔。
        * 用for遍历每次每次鼠标移动后的每一个div都去间隔定时发生style的left和top的改变
        * 另外注意一下let操作
        * */
        for(let i=0;i<divs.length;i++){
            divs[i].style.backgroundColor="rgb("+randomNum(1,255)+","+randomNum(1,255)+","+randomNum(1,255)+")";
            setTimeout(function () {
                divs[i].style.left=left-divs[i].offsetWidth/2+"px";
                divs[i].style.top=top-divs[i].offsetWidth/2+"px";
            },50*i);
        }
    }

    //生成随机数的函数
    function randomNum(n,m) {
        return parseInt(Math.random()*(m-n+1)+n);
    }
</script>
</body>
</html>

阅读更多
个人分类: 前端从入门到放弃
想对作者说点什么? 我来说一句

原生JS写瀑布流

瀑布流

yangwenhui11 yangwenhui11

2017-03-07 13:20:06

阅读数:86

没有更多推荐了,返回首页

不良信息举报

原生JS实现缓动的小球案例

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭