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 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
用js实现放大镜效果
Oct 28 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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
第十二节 类的自动加载 [12]
2006/10/09 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php数据库备份还原类分享
2014/03/20 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
答题辅助python代码实现
2018/01/16 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python中dict和set的用法讲解
2019/03/28 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python框架flask表单实现详解
2019/11/04 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
UNIX特点都有哪些
2016/04/05 面试题
计划生育证明格式及范本
2014/10/09 职场文书
学生个人评语大全
2015/01/04 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL