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


Posted in Javascript onFebruary 18, 2022

看完这个保证你有手就行,制作各种好看的小尾巴!

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

全部代码如下,看注释可以轻易看懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    /*div样式*/
    #main{
        width: auto;height: 1500px;margin: 0;background-color: black;
    }
</style>
</head>
<body>
        <div id="main"></div>
 <script>
    //==========鼠标星球尾巴JS代码============

    //========函数:获取当前鼠标的坐标=========
     function getMousePosition(event) {
         var x = 0;//x坐标
         var y = 0;//y坐标
         //documentElement 返回一个文档的文档元素。
         doc = document.documentElement;
         //body 返回文档的body元素
         body = document.body;
         //解决兼容性
         if (!event) event = window.event;
         //解决鼠标滚轮滚动后与相对坐标的差值
         //pageYoffset是Netscape特有
         if (window.pageYoffset) {
             x = window.pageXOffset;
             y = window.pageYOffset;
         } else {//其他浏览器鼠标滚动
             x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
                 - (doc && doc.clientLeft || body && body.clientLeft || 0);
             y = (doc && doc.scrollTop || body && body.scrollTop || 0)
                 - (doc && doc.clientTop || body && body.clientTop || 0);
         }
         //得到的x加上当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
         x += event.clientX;
         //得到的x加上当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标
         y += event.clientY;
         //返回x和y
         return {'x': x, 'y': y};
     }
     //========函数:获取当前鼠标的坐标=========

     //=====生成从minNum到maxNum的随机数=====
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
            default:
                return 0;
        }
    }
    //=====生成从minNum到maxNum的随机数======

    //======给整个文档绑定一个鼠标移动事件======
    document.onmousemove = function(event){

        // 在页面创建一个标签,(这里是创建一个自定义标签styleImg )
        var styleImg = document.createElement("div");
        //获取随机数1-5,根据随机数来设置标签的样式
        var r = randomNum(1,5);
        switch (r) {
            case 1:
                //设置图片的路径,根据不同的路径就可以更改成不同的样式
                styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
                break;
            case 2:
                styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
                break;
            case 3:
                styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
                break;
            case 4:
                styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
                break;
            case 5:
                styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
                break;
        }
        // 由于要设置动画,设置left 和top,因此,必须要设置定位
        styleImg.style.position = 'absolute'
        // 设置标签的初始位置,即鼠标的当前位置
        var x = getMousePosition(event).x;
        var y = getMousePosition(event).y;
        // 设置styleImg的坐标
    	styleImg.style.top = y +"px";
        styleImg.style.left = x + "px";
        //绑定testDiv为当前鼠标小尾巴生效的区域
        var testDiv = document.getElementById("main");
        // 将新建的标签加到页面的 body标签中
        testDiv.appendChild(styleImg);
        // 在文档中有超出的地方就会不显示,所以尽量绑定到页面的div中
        // 设置溢出隐藏,为了防止鼠标在移动的过程中会触发上下滚动条
        testDiv.style.overflow = 'hidden';
        //
    	var count = 0;
    	//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
        var time = setInterval(function(){
        // 设置定时器 ,让每一次生成的标签在指定的周期内修改相应的透明度
        	count += 5;
            styleImg.style.opacity = (100-count)/100 ;
        }, 30)
        // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
        // 设置延时定时器, 在一定的时间后清除上面的定时器,让创建的标签不再进行变化
        setTimeout(function(){
            // 使用 clearInterval() 来停止执行setInterval函数
            clearInterval(time);
            // 删除创建的标签
            testDiv.removeChild(styleImg);
        },250)
    }
    </script>
</body>
</html>

ps:以上代码参考了多篇不同的文献后自己敲的,没有面向VC写博客哦!

最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴 

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

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

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

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

到此这篇关于JavaScript实现酷炫的鼠标拖尾特效的文章就介绍到这了,更多相关JavaScript鼠标拖尾特效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
js显示文本框提示文字的方法
May 07 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
详解JSON.parse和JSON.stringify用法
Feb 18 #Javascript
前端vue+express实现文件的上传下载示例
详解JavaScript的计时器和按钮效果设置
一篇文章告诉你如何实现Vue前端分页和后端分页
javascript的var与let,const之间的区别详解
Feb 18 #Javascript
You might like
PHP 登录记住密码实现思路
2013/05/07 PHP
php中使用GD库做验证码
2016/03/31 PHP
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
Angular中的interceptors拦截器
2017/06/25 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python实现读取json文件到excel表
2017/11/18 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
有创意的广告词
2014/03/18 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
热门专业求职信
2014/05/24 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
公司2015年终工作总结
2015/05/26 职场文书
小学生暑假生活总结
2015/07/13 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android