JS实现超级好看的鼠标小尾巴特效实现超级好看的鼠标小尾巴特效
看完这个保证你有手就行看完这个保证你有手就行,制作各种好看的小尾巴制作各种好看的小尾巴!
全部代码如下全部代码如下,看注释可以轻易看懂看注释可以轻易看懂
<!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;'/>"
剩余6页未读，继续阅读
资源评论
