这篇文章主要为大家介绍了通过Java脚本语言实现的一个超级好看的鼠标拖尾特效，文中的示例代码讲解详细，对我们学习Java脚本语言有一定的帮助，感兴趣的可以学习一下
看完这个保证你有手就行，制作各种好看的小尾巴！
全部代码如下，看注释可以轻易看懂
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题标题/标题
风格
/*div样式*/
#main{
宽度：自动；高度：1500像素边距：0;背景色：黑色；
}
/风格
/头
身体
div id='main'/div
脚本
//==========鼠标星球尾巴射流研究…代码============
//========函数：获取当前鼠标的坐标=========
函数获取鼠标位置(事件){
var x=0；//x坐标
var y=0；//y坐标
//documentElement返回一个文档的文档元素。
doc=document.documentElement
//正文返回文档的身体元素
body=document.body
//解决兼容性
如果(!event)事件=窗口。事件；
//解决鼠标滚轮滚动后与相对坐标的差值
//pageYoffset是美国网景公司特有
如果(窗口。页面偏移){
x=window.pageXOffset
y=窗户。页面yo偏移量；
} else {//其他浏览器鼠标滚动
x=(doc doc。向左滚动| | body body。向左滚动| | 0)
-(医生医生。客户左| |体。客户端左| | 0)；
y=(doc doc。上卷| |正文正文。滚动顶部| | 0)
-(医生医生。客户端顶部| |正文。客户端top | | 0)；
}
//得到的x加上当事件被触发时鼠标指针向对于浏览器页面（或客户区)的水平坐标
x=event.clientX
//得到的x加上当事件被触发时鼠标指针向对于浏览器页面（或客户区)的垂直坐标
y=事件.客户
//返回x和y
return {'x': x，' y ':y }；
}
//========函数：获取当前鼠标的坐标=========
//=====生成从鲦鱼到maxNum的随机数=====
函数randomNum(最小，最大){
switch(arguments.length){
案例1:
返回parseInt(Math.random()*minNum 1，10)；
案例二：
返回解析int(数学。random()*(maxNum-minNum 1)minNum，10)；
默认值：
返回0;
}
}
//=====生成从鲦鱼到maxNum的随机数======
//======给整个文档绑定一个鼠标移动事件======
文档。onmousemove=function(event){
//在页面创建一个标签，(这里是创建一个自定义标签样式)
var style img=文档。createelement(' div ')；
//获取随机数1-5,根据随机数来设置标签的样式
var r=randomNum(1，5)；
开关(r) {
案例1:
//设置图片的路径，根据不同的路径就可以更改成不同的样式
styleImg.innerHTML='img src='./静态/慕板/图像/邢01。png ' style=' width:50px；高度：自动；'/'
打破；
案例二：
styleImg.innerHTML='img src='./静态/模板/图片/xing 02。png ' style=' width:50px；高度：自动；'/'
打破；
案例三：
styleImg.innerHTML='img src='./静态/慕板/图像/邢03。png ' style=' width:50px；高度：自动；'/'
打破；
案例4:
styleImg.innerHTML='img src='./静态/模板/图片/xing 04。png ' style=' width:50px；高度：自动；'/'
打破；
案例5:
styleImg.innerHTML='img src='./静态/模板/图片/xing 05。png ' style=' width:50px；高度：自动；'/'
打破；
}
//由于要设置动画，设置左边的和顶，因此，必须要设置定位
风格img。风格。位置='绝对'
//设置标签的初始位置，即鼠标的当前位置
var x=getMousePosition(事件)。x；
var y=getMousePosition(事件)。y；
//设置样式的坐标
style img . style . top=y ' px '；
style img . style . left=x ' px '；
//将testDiv绑定到当前鼠标尾部生效的区域。
var testDiv=document . getelementbyid(' main ')；
//将新创建的标记添加到页面的body标记中
testdiv . appendchild(style img)；
//如果文档中有多余的，就不显示了，尽量绑定到页面的div。
//设置溢出隐藏，以防止鼠标在移动过程中触发上下滚动条
testdiv . style . overflow=' hidden '；
//
var count=0；
//setInterval()方法可以根据指定的周期(以毫秒为单位)调用函数或计算表达式
var time=setInterval(function(){
//设置一个定时器，让每个生成的标签在指定的周期内修改对应的透明度。
计数=5；
style img . style . opacity=(100-count)/100；
}, 30)
//setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
//设置延时定时器，一定时间后清除上述定时器，这样创建的标签就不会改变。
setTimeout(function(){
//使用clearInterval()停止setInterval函数。
clearInterval(时间)；
//删除创建的标签
testdiv . remove child(style img)；
},250)
}
/脚本
/body
/html
Ps:上面的代码是我自己参考了很多不同的文献打出来的，但是没有VC的博客！
最后，我把图片资料发给你。只要在上面的代码中做一个简单的修改，就可以实现其他样式的小尾巴。
这篇关于JavaScript实现酷炫鼠标拖尾效果的文章到此为止。更多相关JavaScript鼠标拖尾效果，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。