JS实现超级好看的鼠标小尾巴特效


Posted in Javascript onDecember 01, 2020

看完这个保证你有手就行,制作各种好看的小尾巴!

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实现超级好看的鼠标小尾巴特效
JS实现超级好看的鼠标小尾巴特效

JS实现超级好看的鼠标小尾巴特效JS实现超级好看的鼠标小尾巴特效

好东西记得要收藏哦!!!

到此这篇关于JS实现超级好看的鼠标小尾巴特效的文章就介绍到这了,更多相关JS实现鼠标小尾巴内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
js arguments对象应用介绍
Nov 28 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
Javascript中this的用法详解
Sep 22 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 #Javascript
浅谈es6中的元编程
Dec 01 #Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 #Vue.js
微信小程序轮播图swiper代码详解
Dec 01 #Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 #Javascript
layui使用及简单的三级联动实现教程
Dec 01 #Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
You might like
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
一套带网友答案的.NET笔试题
2016/12/06 面试题
夜大自我鉴定
2013/10/31 职场文书
学历公证委托书
2014/04/09 职场文书
农村党员对照检查材料
2014/09/24 职场文书
建党伟业观后感
2015/06/01 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
用python画城市轮播地图
2021/05/28 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL