• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123456914 显示全部楼层 发表于 2022-1-8 03:22:47 |阅读模式 打印 上一主题 下一主题
看完这个保证你有手就行,制作各种悦目的小尾巴!

全部代码如下,看解释可以容易看懂
  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代码============
  17.     //========函数:获取当前鼠标的坐标=========
  18.      function getMousePosition(event) {
  19.          var x = 0;//x坐标
  20.          var y = 0;//y坐标
  21.          //documentElement 返回一个文档的文档元素。
  22.          doc = document.documentElement;
  23.          //body 返回文档的body元素
  24.          body = document.body;
  25.          //解决兼容性
  26.          if (!event) event = window.event;
  27.          //解决鼠标滚轮滚动后与相对坐标的差值
  28.          //pageYoffset是Netscape特有
  29.          if (window.pageYoffset) {
  30.              x = window.pageXOffset;
  31.              y = window.pageYOffset;
  32.          } else {//其他浏览器鼠标滚动
  33.              x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
  34.                  - (doc && doc.clientLeft || body && body.clientLeft || 0);
  35.              y = (doc && doc.scrollTop || body && body.scrollTop || 0)
  36.                  - (doc && doc.clientTop || body && body.clientTop || 0);
  37.          }
  38.          //得到的x加上当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
  39.          x += event.clientX;
  40.          //得到的x加上当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标
  41.          y += event.clientY;
  42.          //返回x和y
  43.          return {'x': x, 'y': y};
  44.      }
  45.      //========函数:获取当前鼠标的坐标=========
  46.      //=====生成从minNum到maxNum的随机数=====
  47.     function randomNum(minNum,maxNum){
  48.         switch(arguments.length){
  49.             case 1:
  50.                 return parseInt(Math.random()*minNum+1,10);
  51.             case 2:
  52.                 return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
  53.             default:
  54.                 return 0;
  55.         }
  56.     }
  57.     //=====生成从minNum到maxNum的随机数======
  58.     //======给整个文档绑定一个鼠标移动事件======
  59.     document.onmousemove = function(event){
  60.         // 在页面创建一个标签,(这里是创建一个自定义标签styleImg )
  61.         var styleImg = document.createElement("div");
  62.         //获取随机数1-5,根据随机数来设置标签的样式
  63.         var r = randomNum(1,5);
  64.         switch (r) {
  65.             case 1:
  66.                 //设置图片的路径,根据不同的路径就可以更改成不同的样式
  67.                 styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
  68.                 break;
  69.             case 2:
  70.                 styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
  71.                 break;
  72.             case 3:
  73.                 styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
  74.                 break;
  75.             case 4:
  76.                 styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
  77.                 break;
  78.             case 5:
  79.                 styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
  80.                 break;
  81.         }
  82.         // 由于要设置动画,设置left 和top,因此,必须要设置定位
  83.         styleImg.style.position = 'absolute'
  84.         // 设置标签的初始位置,即鼠标的当前位置
  85.         var x = getMousePosition(event).x;
  86.         var y = getMousePosition(event).y;
  87.         // 设置styleImg的坐标
  88.             styleImg.style.top = y +"px";
  89.         styleImg.style.left = x + "px";
  90.         //绑定testDiv为当前鼠标小尾巴生效的区域
  91.         var testDiv = document.getElementById("main");
  92.         // 将新建的标签加到页面的 body标签中
  93.         testDiv.appendChild(styleImg);
  94.         // 在文档中有超出的地方就会不显示,所以尽量绑定到页面的div中
  95.         // 设置溢出隐藏,为了防止鼠标在移动的过程中会触发上下滚动条
  96.         testDiv.style.overflow = 'hidden';
  97.         //
  98.             var count = 0;
  99.             //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
  100.         var time = setInterval(function(){
  101.         // 设置定时器 ,让每一次生成的标签在指定的周期内修改相应的透明度
  102.                 count += 5;
  103.             styleImg.style.opacity = (100-count)/100 ;
  104.         }, 30)
  105.         // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
  106.         // 设置延时定时器, 在一定的时间后清除上面的定时器,让创建的标签不再进行变化
  107.         setTimeout(function(){
  108.             // 使用 clearInterval() 来停止执行setInterval函数
  109.             clearInterval(time);
  110.             // 删除创建的标签
  111.             testDiv.removeChild(styleImg);
  112.         },250)
  113.     }
  114.     </script>
  115. </body>
  116. </html>
复制代码
ps:以上代码参考了多篇不同的文献后自己敲的,没有面向VC写博客哦!
最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴 




到此这篇关于JavaScript实现酷炫的鼠标拖尾特效的文章就介绍到这了,更多干系JavaScript鼠标拖尾特效内容请搜刮脚本之家以前的文章或继续欣赏下面的干系文章盼望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作