JS实现超级好看的鼠标小尾巴特效
更新时间：2020年12月01日 14:52:03 作者：我不是秃头哆唻咪
这篇文章主要给大家介绍了关于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;'/>"
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写博客哦!
最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴
好东西记得要收藏哦!!!
到此这篇关于JS实现超级好看的鼠标小尾巴特效的文章就介绍到这了,更多相关JS实现鼠标小尾巴内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差别，下面与大家分享下JavaScript中SVG API编程演示，感兴趣的朋友可以参考下哈2013-06-06
artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧2016-04-04
这篇文章主要介绍了微信小程序学习总结（四）事件与冒泡,结合实例形式分析了微信小程序事件、冒泡、数据获取相关机制、原理与操作注意事项,需要的朋友可以参考下2020-06-06
JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下2018-11-11
对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了2020-10-10
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
这篇文章主要介绍了JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法,涉及javascript针对字符串的遍历、查找、正则匹配及转换等操作技巧,并附带完整demo源码供读者下载参考,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JavaScript中Map和Set数据结构使用方法的相关资料,Map是一种键值对集合,支持任意类型的键和值,保留插入顺序,并提供多种遍历和操作方法,Set是一种唯一值集合,通过哈希算法保证唯一性,提供添加、删除、检查元素的方法,需要的朋友可以参考下2025-03-03
Canvas对于我们前端来说是一个非常强大的工具,它可以实现各种复杂的图形和动画效果,我们如果能够熟练掌握它,我们就可以做很多炫酷的效果,本文就给大家介绍了用canvas画出一片星空的方法,需要的朋友可以参考下2023-11-11
Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值。它是JavaScript中的第七种数据类型。本文将详细讲讲Symbol的使用，需要的可以参考一下2022-09-09
这篇文章主要介绍了浅谈js数组splice删除某个元素爬坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论