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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
js常用代码段整理
Nov 30 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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 VS ASP
2006/10/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python模块之StringIO使用示例
2015/04/08 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
财产公证书
2014/04/10 职场文书
婚宴邀请函
2015/01/30 职场文书
总经理岗位职责范本
2015/04/01 职场文书
检讨书怎么写?
2019/06/21 职场文书