看完这个保证你有手就行,制作各种好看的小尾巴!
全部代码如下,看注释可以轻易看懂
<!doctype html><html lang="en"><head> <meta chart="utf-8"> &谜语笑话lt;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 getmouposition(event) { var x = 0;//x坐标 var y = 0;//y坐标 //documentelement 返回一个文档的文档元素。 doc = document.documentelement; //body 返回文档的body元素 body = document.body; //解决兼容性 if (!event) event = window.event; //解决鼠标滚轮滚动后与相对坐标的差值 //pageyofft是netscape特有 if (window.pageyofft) { x = window.pagexofft; y = window.pageyofft; } el {//其他浏览器鼠标滚动 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){ ca 1: return parint(math.random()*minnum+1,10); ca 2: return parint(math.random()*(maxnum-minnum+1)+minnum,10); default: return 0; } } //=====生成从minnum到maxnum的随机数====== //======给整个文档绑定一个鼠标移动事件====== document.onmoumove = function(event){ // 在页面创建一个标签，（这里是创建一个自定义标签styleimg ） var styleimg = document.createelement("div"); //获取随机数1-5,根据随机数来设置标签的样式 var r = randomnum(1,5); switch (r) { ca 1: //设置图片的路径,根据不同的路径就可以更改成不同的样式 styleimg.innerhtml="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>" break; ca 2: styleimg广州风俗.innerhtml="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>" break; ca 3: styleimg.innerhtml="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>" break; ca 4: styleimg.innerhtml="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>" break; ca 5: styleimg.innerhtml="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>" break; } // 由于要设置动画，设置left 和top，因此，必须要设置定位 styleimg.style.position = 'absolute' // 设置标签的初始位置，即鼠标的当前位置 var x = getmouposition(event).x; var y = getmouposition(event).y; // 设置styleimg的坐标 styleimg.style.top = y +"px"; styleimg.style.le何茵茵ft = x + "px"; //绑定testdiv为当前鼠标小尾巴生效的区域 var testdiv = document.getelementbyid("main"); // 将新建的标签加到页面的 body标签中 testdiv.appendchild(styleimg); // 在文档中有超出的财务策划师地方就会不显示，所以尽量绑定到页面的div中 // 设置溢出隐藏，为了防止鼠标在移动的过程中会触发上下滚动条 testdiv.style.overflow = 'hidden'; // var count = 0; //tinterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 var time = tinterval(function(){ // 设置定时器 ，让每一次生成的标签在指定的周期内修改相应的透明度 count += 5; styleimg.style.opacity = (100-count)/100 ; }, 30) // ttimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 // 设置延时定时器， 在一定的时间后清除上面的定时器，让创建的标签不再进行变化 ttimeout(function(){ // 使用 clearinterval() 来停止执行tinterval函数 clearinterval(time); // 删除创建的标签 testdiv.removechild(styleimg); },250) } </script></body></html>ps:以上代码参考了多篇不同的文献后自己敲的,没有面向vc写博客哦!
最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴
到此这篇关于javascript实现酷炫的鼠标拖尾特效的文章就介绍到这了,更多相关javascript鼠标拖尾特效内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-04 09:04:32，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/a988bb26ed87e1660a4f0902c27bd4ab.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript实现酷炫的鼠标拖尾特效.doc
本文 PDF 下载地址：JavaScript实现酷炫的鼠标拖尾特效.pdf
| 留言与评论（共有 0 条评论） |
