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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
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之PHP语法学习笔记1
2006/12/17 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
linux下安装easy_install的方法
2013/02/10 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
使用Python更换外网IP的方法
2018/07/09 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python银行系统实现源码
2019/10/25 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
导师推荐信范文
2014/05/09 职场文书
2014年保密工作总结
2014/11/22 职场文书
中秋节寄语2015
2015/03/24 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang