JS实现超级好看的鼠标小尾巴特效
更新时间：2020-12-01 16:08:07 作者：佚名 
我要评论(0)
看完这个保证你有手就行,制作各种好看的小尾巴!
全部代码如下,看注释可以轻易看懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>T
全部代码如下,看注释可以轻易看懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>T
看完这个保证你有手就行,制作各种好看的小尾巴!
全部代码如下,看注释可以轻易看懂
<!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实现鼠标小尾巴内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
- JS鼠标事件大全 推荐收藏
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- js与jquery中获取当前鼠标的x、y坐标位置的代码
- js 鼠标点击事件及其它捕获
- js改变鼠标的形状和样式的方法
- javascript 鼠标事件总结
- javascript监听鼠标滚轮事件浅析
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- js中鼠标滚轮事件详解(firefox多浏览器)
- js判断鼠标位置是否在某个div中的方法
您可能感兴趣的文章:
相关文章
- 看完这个保证你有手就行,制作各种好看的小尾巴! 全部代码如下,看注释可以轻易看懂 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T2020-12-01
SpringBoot打包发布到linux上（centos 7）的步骤
打包发布 jar包部署相对较为简单，尤其是在分布式服务比较多的情况下。 单体项目 如果是单体项目，只需要找到maven的插件，点击package运行。注意是Lifecycle下的插2020-12-01Spring Cloud Gateway(读取、修改 Request Body)的操作
Spring Cloud Gateway（以下简称 SCG）做为网关服务，是其他各服务对外中转站，通过 SCG 进行请求转发。 在请求到达真正的微服务之前，我们可以在这里做一些预处理，2020-12-01SpringBoot + Mybatis-plus实战之Mybatis-plus的一级缓存、二级缓存
前言 现在的JAVA行业，貌似已经是SpringBoot + SpringCloud 的天下了，早期的SSH,SSM框架已经老去，与SpringBoot相结合的JPA框架虽然省去了很多的增删改查sql，但是2020-12-01- 一、TkMybatis Tkmybatis 是基于 Mybatis 框架开发的一个工具，通过调用它提供的方法实现对单表的数据操作，不需要写任何 sql 语句，这极大地提高了项目开发效率。2020-12-01
- 首先介绍java定时器（java.util.Timer）有定时执行计划任务的功能,通过设定定时器的间隔时间,会自动在此间隔时间后执行预先安排好的任务(java.util. TimerTask) 由于2020-12-01
解决spring cloud gateway 获取body内容并修改的问题
之前写过一篇文章，如何获取body的内容。 Spring Cloud Gateway获取body内容，不影响GET请求 确实能够获取所有body的内容了，不过今天终端同学调试接口的时候和我说2020-12-01Android结合kotlin使用coroutine的方法实例
最近入了Android坑，目前还处于疯狂学习的状态，所以很久都没有写博客了。今天记录一个小代码片段，在Android上使用coroutine 的小例子。 由于我自己是做一个记账软2020-12-01- 最近研究如果用原生的Filter来判别session存在否或者过期否。来跳转到的页面实例，下载来展示代码。 因为顾虑器是每次请求能会进入的，所以可以设置了，进行拦截判断2020-12-01
解决MySQL读写分离导致insert后select不到数据的问题
MySQL设置独写分离,在代码中按照如下写法,可能会出现问题 // 先录入 this.insert(obj); // 再查询 Object res = this.selectById(obj.getId()); res: null; 线上2020-12-01
最新评论