看完这个保证你有手就行,制作各种好看的小尾巴!
全部代码如下,看注释可以轻易看懂
<!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写博客哦!
最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴
好东西记得要收藏哦!!!
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】