脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js鼠标拖尾特效

javascript实现鼠标拖尾特效

 更新时间：2021年09月16日 10:04:29   作者：那年风吹雪正  
这篇文章主要为大家详细介绍了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>

运行结果：

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

您可能感兴趣的文章:

相关文章

  • JS运动特效之链式运动分析

    JS运动特效之链式运动分析

    这篇文章主要介绍了JS运动特效之链式运动,结合实例形式分析了javascript链式运动的原理与具体实现技巧,需要的朋友可以参考下
    2018-01-01
  • js实现图片查看器

    js实现图片查看器

    这篇文章主要为大家详细介绍了js实现图片查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 详解JavaScript中Hash Map映射结构的实现

    详解JavaScript中Hash Map映射结构的实现

    Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方,不过哈希对象Object并不是一个真正的哈希映射,没Java中的Hash Map来的那么强大,well,接下来带大家详解JavaScript中Hash Map映射结构的实现
    2016-05-05
  • 关于同时使用swiper和echarts遇到的问题及解决方法

    关于同时使用swiper和echarts遇到的问题及解决方法

    这篇文章主要介绍了关于同时使用swiper和echarts遇到的问题及解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04
  • js获取内联样式的方法

    js获取内联样式的方法

    这篇文章主要介绍了js获取内联样式的方法,针对标准浏览器与IE浏览器进行不同的判断与获取,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 基于Bootstrap3表格插件和分页插件实例详解

    基于Bootstrap3表格插件和分页插件实例详解

    这篇文章主要介绍了基于Bootstrap3表格插件和分页插件实例详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • 微信小程序实现页面跳转传值以及获取值的方法分析

    微信小程序实现页面跳转传值以及获取值的方法分析

    这篇文章主要介绍了微信小程序实现页面跳转传值以及获取值的方法,结合实例形式总结分析了微信小程序页面跳转及传值的常用操作技巧,需要的朋友可以参考下
    2017-12-12
  • JS实现表格隔行变色

    JS实现表格隔行变色

    这篇文章主要为大家详细介绍了JS实现表格隔行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Layui数据表格之获取表格中所有的数据方法

    Layui数据表格之获取表格中所有的数据方法

    今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    这篇文章主要介绍了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作,结合实例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map进行遍历操作相关技巧与操作注意事项,需要的朋友可以参考下
    2019-02-02

最新评论