javascript实现鼠标拖尾特效

鼠标特效需要使用定时器setTimeout在固定时间生成节点，删除节点，生成的节点赋予随机的宽高，随机颜色，使每个特效节点都看起来不一样

注意：生成的节点需要设置绝对定位，使其脱离文档流，不影响页面中其他元素的位置

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #9df;
            overflow: hidden;
            height: 100vh;
        }

        span {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            position: absolute;
            pointer-events: none;
            transform: translate(-50%, -50%);
            box-shadow: 10px 10px 30px #45f, -10px -10px 30px #d80;
            animation: box 5s linear infinite;
            z-index: 3;
        }

        @keyframes box {
            0% {
                transform: translate(-50%, -50%);
                opacity: 1;
                filter: hue-rotate(0deg);
            }
            100% {
                transform: translate(-50%, -1000%);
                opacity: 1;
                filter: hue-rotate(720deg);
            }
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    document.addEventListener("mousemove", function(e) {
        var body = document.querySelector("body");
        var span = document.createElement("span");
        var x = e.offsetX
        var y = e.offsetY
        span.style.left = x + "px"
        span.style.top = y + "px";

        console.log(x + ">>>" + y)
        var a = Math.random() * 30;
        span.style.width = 30 + a + "px";
        span.style.height = 30 + a + "px";
        body.appendChild(span);
        setTimeout(function() {
            span.remove();
            // console.log("ok")
        }, 4500)
    })
</script>

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现鼠标移动拖尾

    本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.event; var mouseInfo = { mouseX : e.clientX, mouseY : e.clientY } return mouseInfo; } function getMouseArt() { this.artStyle = { position: "fixed"

  • javascript实现鼠标拖尾特效

    javascript实现鼠标拖尾特效

    鼠标特效需要使用定时器setTimeout在固定时间生成节点,删除节点,生成的节点赋予随机的宽高,随机颜色,使每个特效节点都看起来不一样 注意:生成的节点需要设置绝对定位,使其脱离文档流,不影响页面中其他元素的位置 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com

  • JavaScript实现酷炫的鼠标拖尾特效

    JavaScript实现酷炫的鼠标拖尾特效

    看完这个保证你有手就行,制作各种好看的小尾巴! 全部代码如下,看注释可以轻易看懂 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div样式*/ #main{ width: auto;height: 1500px;margin: 0;backgr

  • JavaScript实现鼠标拖拽调整div大小

    本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码,供大家参考,具体内容如下 实现思路: 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的移动修改div的尺寸 鼠标松开时结束尺寸修改 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • 使用python tkinter实现各种个样的撩妹鼠标拖尾效果

    使用python tkinter实现各种个样的撩妹鼠标拖尾效果

    目录 一.系统拖尾 二.文艺型拖尾 三.实用型拖尾 四.爱心拖尾 五.奔跑的火柴人型拖尾 六.胡桃摇钱拖尾 七.女朋友或者老婆拖尾 python-tkinter 实现各种个样的撩妹鼠标拖尾,效果图展示: 系统的拖尾已经无法满足我们了,女朋友叫你把鼠标拖尾换成她的照片,让你时时刻刻都可以看见她,这个要求你答不答应. 当然,这个要求还是可以满足一下的,我们来具体看一看吧. 要制作拖尾,首先,我们需要知道鼠标的位置,那有没有获取鼠标位置的方法呢?答案当然是有的.因此,我们引用到pyautogui模块

  • JavaScript实现鼠标拖拽效果

    JavaScript实现鼠标拖拽效果

    本文实例为大家分享了JavaScript实现鼠标拖拽效果的具体代码,供大家参考,具体内容如下 这次的效果图如下: 我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢? 我们需要用到三个函数: onmousedown.onmousemove.onmouseup,分别表示鼠标按下.鼠标移动.鼠标抬起 在鼠标按下的回调函数中,我们需要通过clientX和clientY获取鼠标的初始位置,通过offsetLeft和offsetTop获取盒子的初始

  • 使用javaScript实现鼠标拖拽事件

    本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

  • JavaScript实现鼠标点击导航栏变色特效

    废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • javascript实现漂亮的拖动层，窗口拖拽特效

    javascript实现漂亮的拖动层,窗口拖拽特效 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • javascript利用canvas实现鼠标拖拽功能

    利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动. 效果: 主要思路: 当鼠标按下时,用isPointInPath方法判断鼠标位置是否在元素上,如果在则鼠标移动时元素跟着移动:当鼠标抬起时,将鼠标移动事件和抬起事件置空. 代码如下: <canvas id="can" width="400" height="400"></canvas> <script type="text/ja

随机推荐