设为首页收藏本站
开启辅助访问 切换到宽版

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

安徽论坛»论坛 › 大国徽商 › 计算机 › JavaScript实现酷炫的鼠标拖尾特效
返回列表 发新帖
查看: 11341|回复: 0

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

[复制链接]
快乐人L

85

主题

0

回帖

267

积分

中级会员

Rank: 3Rank: 3

积分
267
发表于 2022-3-26 11:00:59 | 显示全部楼层 |阅读模式
网站内容均来自网络，本站只提供信息平台，如有侵权请联系删除，谢谢！
看完这个保证你有手就行,制作各种好看的小尾巴!

全部代码如下,看注释可以轻易看懂
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <style>
  7.     /*div样式*/
  8.     #main{
  9.         width: auto;height: 1500px;margin: 0;background-color: black;
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14.         <div id="main"></div>
  15. <script>
  16.     //==========鼠标星球尾巴JS代码============

  18.     //========函数:获取当前鼠标的坐标=========
  19.      function getMousePosition(event) {
  20.          var x = 0;//x坐标
  21.          var y = 0;//y坐标
  22.          //documentElement 返回一个文档的文档元素。
  23.          doc = document.documentElement;
  24.          //body 返回文档的body元素
  25.          body = document.body;
  26.          //解决兼容性
  27.          if (!event) event = window.event;
  28.          //解决鼠标滚轮滚动后与相对坐标的差值
  29.          //pageYoffset是Netscape特有
  30.          if (window.pageYoffset) {
  31.              x = window.pageXOffset;
  32.              y = window.pageYOffset;
  33.          } else {//其他浏览器鼠标滚动
  34.              x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
  35.                  - (doc && doc.clientLeft || body && body.clientLeft || 0);
  36.              y = (doc && doc.scrollTop || body && body.scrollTop || 0)
  37.                  - (doc && doc.clientTop || body && body.clientTop || 0);
  38.          }
  39.          //得到的x加上当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标
  40.          x += event.clientX;
  41.          //得到的x加上当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标
  42.          y += event.clientY;
  43.          //返回x和y
  44.          return {'x': x, 'y': y};
  45.      }
  46.      //========函数:获取当前鼠标的坐标=========

  48.      //=====生成从minNum到maxNum的随机数=====
  49.     function randomNum(minNum,maxNum){
  50.         switch(arguments.length){
  51.             case 1:
  52.                 return parseInt(Math.random()*minNum+1,10);
  53.             case 2:
  54.                 return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
  55.             default:
  56.                 return 0;
  57.         }
  58.     }
  59.     //=====生成从minNum到maxNum的随机数======

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

  64.         // 在页面创建一个标签，（这里是创建一个自定义标签styleImg ）
  65.         var styleImg = document.createElement("div");
  66.         //获取随机数1-5,根据随机数来设置标签的样式
  67.         var r = randomNum(1,5);
  68.         switch (r) {
  69.             case 1:
  70.                 //设置图片的路径,根据不同的路径就可以更改成不同的样式
  71.                 styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
  72.                 break;
  73.             case 2:
  74.                 styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
  75.                 break;
  76.             case 3:
  77.                 styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
  78.                 break;
  79.             case 4:
  80.                 styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
  81.                 break;
  82.             case 5:
  83.                 styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
  84.                 break;
  85.         }
  86.         // 由于要设置动画，设置left 和top，因此，必须要设置定位
  87.         styleImg.style.position = 'absolute'
  88.         // 设置标签的初始位置，即鼠标的当前位置
  89.         var x = getMousePosition(event).x;
  90.         var y = getMousePosition(event).y;
  91.         // 设置styleImg的坐标
  92.             styleImg.style.top = y +"px";
  93.         styleImg.style.left = x + "px";
  94.         //绑定testDiv为当前鼠标小尾巴生效的区域
  95.         var testDiv = document.getElementById("main");
  96.         // 将新建的标签加到页面的 body标签中
  97.         testDiv.appendChild(styleImg);
  98.         // 在文档中有超出的地方就会不显示，所以尽量绑定到页面的div中
  99.         // 设置溢出隐藏，为了防止鼠标在移动的过程中会触发上下滚动条
  100.         testDiv.style.overflow = 'hidden';
  101.         //
  102.             var count = 0;
  103.             //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
  104.         var time = setInterval(function(){
  105.         // 设置定时器 ，让每一次生成的标签在指定的周期内修改相应的透明度
  106.                 count += 5;
  107.             styleImg.style.opacity = (100-count)/100 ;
  108.         }, 30)
  109.         // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
  110.         // 设置延时定时器， 在一定的时间后清除上面的定时器，让创建的标签不再进行变化
  111.         setTimeout(function(){
  112.             // 使用 clearInterval() 来停止执行setInterval函数
  113.             clearInterval(time);
  114.             // 删除创建的标签
  115.             testDiv.removeChild(styleImg);
  116.         },250)
  117.     }
  118.     </script>
  119. </body>
  120. </html>
复制代码
ps:以上代码参考了多篇不同的文献后自己敲的,没有面向VC写博客哦!
最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴 




到此这篇关于JavaScript实现酷炫的鼠标拖尾特效的文章就介绍到这了,更多相关JavaScript鼠标拖尾特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
免责声明
1. 本论坛所提供的信息均来自网络，本网站只提供平台服务，所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时，必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体，但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权，请立即联系，本网站将及时删除相关内容。
回复 设为聚合帖聚合到帖子

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表