js鼠标拖影效果，

最新推荐文章于 2024-09-02 17:34:07 发布

扼流挽

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量214

点赞数 6

文章标签： javascript 计算机外设开发语言

本文链接：https://blog.csdn.net/Zbz00720/article/details/139197764

版权

文章目录

效果展示
一、主要逻辑和思路
二、代码实现
总结

效果展示

这里鼠标指针没有录入到图片中，而且帧数有限制，实际效果会很丝滑的

在这里插入图片描述

一、主要逻辑和思路

首先，鼠标拖影效果，就是四五个小球跟着鼠标位置的移动而移动。
这里，我们要先试着让一个小球跟着鼠标动起来。
这里小球的样式大家可以随意设置，但千万别忘了设置 position: absolute;因为要用到left和top来让小球移动位置

监听window的鼠标移动事件 , 这里你用onmousemove绑定事件也可以。
window.addEventListener( 'mousemove',function(event){
	var xp = event.clientX  // 获取事件对象中，鼠标的X轴位置
	var yp = event.clientY  // 获取事件对象中，鼠标的轴位置
	// 这两个方法，大家可以用console.log（）看一看，方便理解后面的逻辑
	最后再把这两个变量，用来更改你的小球left和top的值就可以了
	div.style.left = e.clientX+'px';
    div.style.top = e.clientY+'px';
    div是你的小球dom对象，记得更换，同时也别忘了再数值后面加上px
,false )

如果大家跟着我的逻辑，让自己的小球可以跟随鼠标动起来了，那么你就成功一半了，接下来，就是多做几个小球，然后让后面几个小球延时跟着鼠标移动，这样鼠标拖影效果也就完成了！

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
	var divs = document.querySelectorAll('div');
	//工具函数，接收两个参数，e是事件对象，i则是小球的索引
	function pos(e,i){
        divs[i].style.left = e.clientX+'px';
        divs[i].style.top = e.clientY+'px';
    }
    //调用函数
    function move(e){
        pos(e,0)
        setTimeout( function(){ 
            pos(e,1)
            setTimeout( function(){ 
                pos(e,2)
                setTimeout( function(){ 
                    pos(e,3)
                    setTimeout( function(){ 
                        pos(e,4)
                    },30 )
                },30 )
            },30 )
        },30 )
    }
    window.addEventListener( 'mousemove',move,false )
    //最后，把调用函数绑定到window的鼠标移动事件上

主要逻辑就是，通过一次性计时器的嵌套，来实现延迟触发工具函数，从而实现鼠标拖影效果

二、代码实现

完整代码放下面了，里面还有随机颜色，和大小不断变化的效果，这里暂不过多讲解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: black;
        }
        div{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: red;
            box-shadow: 0 0 10px 0 red;
            border-radius: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    window.addEventListener( 'mousemove',move,false )
    var divs = document.querySelectorAll('div');
    var color = [4,5,6,7,8,9,'a','b','c','d','e','f']
    var sss = null;
    function colo(){
        var hexcolor = '';
        while (hexcolor.length<6) {
            var HEXindex = Math.floor( Math.random()*color.length );
            if( hexcolor.indexOf( color[HEXindex] ) === -1 ){
                hexcolor += color[HEXindex];
            }
            sss = hexcolor;
        }
    }
    colo();
    setInterval(colo,500)
    function move(e){
        pos(e,0)
        setTimeout( function(){ 
            pos(e,1)
            setTimeout( function(){ 
                pos(e,2)
                setTimeout( function(){ 
                    pos(e,3)
                    setTimeout( function(){ 
                        pos(e,4)
                    },30 )
                },30 )
            },30 )
        },30 )
    }
    function pos(e,i){
        divs[i].style.left = e.clientX+'px';
        divs[i].style.top = e.clientY+'px';
        divs[i].style.background = "#"+sss;
        divs[i].style.boxShadow = "0 0 100px 0 #"+sss;
    }
    var xxx = 50;
    var u = true;
    function ooo(){
        if( xxx>=200 ){
            u = false;
        }
        if( xxx<=30 ){
            u = true;
        }
        if( u ){
            xxx+=2;
        }else{
            xxx-=2;
        }
        for( var i = 0; i < divs.length; i++ ){
            divs[i].style.width = xxx+'px'
            divs[i].style.height = xxx+'px'
        }
       
    }
    setInterval(ooo,20)