JavaScript-高级动画之产生絮条

前言：使用简单的js代买实现 华东鼠标产生絮条的效果

主要思路为：利用了鼠标的移动事件以及元素的坐标属性。

onmousemove：鼠标滑动时间

首先想要出现重影的情况  需要有多个小圆圈来进行移动效果每一个移动都有间隔。

 那么比较方便的就是使用ul li标签创建多个小正方形 后续使用 border-radius: 50%; 边框圆角化 进行修改 让其变为圆型。

先获取包裹li标签的元素 后续给这个元素添加鼠标拖动事件，然后添加定时器，使用offsetWidth将鼠标光标进入的时候 时 图片的正中间

 var liList = document.querySelectorAll("li")
        document.onmousemove = function () {
            var event = event || window.event
            var num = 0
            var time = setInterval(function () {
                liList[num].style.display = "block"
                liList[num].style.backgroundColor = colour()
                liList[num].style.left = event.clientX - liList[0].offsetWidth / 2 + "px";
                liList[num].style.top = event.clientY - liList[0].offsetWidth / 2 + "px";
                num++

因为使用的li标签获取到li标签后属于伪数组 所以 num++ 可以分别获取到li标签

后续加一个判断 为如果num的值大于liList.length将清除定时器

if (num >= liList.length) {
                    clearInterval(time)
                }
            }, 20)

若想再拖动的时候 随机更换 li的背景颜色的话 可以直接写随机数然后调用

function random(n,m){
            return Math.floor(Math.random()*(m-n)+1-n)
        }

        function colour(){
            return "rgb("+random(0,255)+","+ random(0,255)+","+ random(0,255)+")"
        }