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 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
详细分析React 表单与事件
Jul 08 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
Element实现动态表格的示例代码
Aug 02 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python各种excel写入方式的速度对比
2020/11/10 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
护理专业推荐信
2013/11/07 职场文书
给老师的道歉信
2014/01/11 职场文书
中学生励志演讲稿
2014/04/26 职场文书
体现团队精神的口号
2014/06/06 职场文书
《鲸》教学反思
2016/02/23 职场文书