简单实现js鼠标跟随效果


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body,div{
   margin:0;
   padding:0;

  }
  #box{
   position:relative;
   margin:20px auto;
   width:300px;
   height:300px;
   background:#008000;
  }
  #mark{
   position:absolute;
   top:0;
   left:0;
   width:100px;
   height:100px;
   background:red;
  }
 </style>
</head>
<body>
 <div id='box'>
  
 </div>
 <script>
  var box = document.getElementById('box');

  box.onmouseover = function(e){
   e = e || window.event;
   var mark = document.createElement('div');
   mark.id = "mark";
   this.appendChild(mark);
   mark.style.left = e.clientX - this.offsetLeft + 5 + "px";
   mark.style.top = e.clientY - this.offsetTop + 5 + "px";
   //阻止mark盒子的onmouseover事件的冒泡传播
   mark.onmouseover = function(e){
    e = e || window.event;
    e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
   }
   mark.onmouseout = function(e){
    e = e || window.event;
    e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
   }
  }
  //以下代码会出现一个问题,当鼠标移动过快的时候,鼠标会进入到mark这个盒子,会触发它的mouseover行为,由于事件的冒泡传播机制,导致box的mouseover会重新被触发,导致红色盒子一直在不断的创建
  box.onmousemove = function(e){
   e = e || window.event;
   var mark = document.getElementById('mark');
   if(mark){
    mark.style.left = e.clientX - this.offsetLeft + 5 + "px";
    mark.style.top = e.clientY - this.offsetTop + 5 + "px";
   }

  }
  //依然有问题:鼠标快速移动,首先会到mark上,此时浏览器在计算mark的位置,计算完成,mark到达指定的位置,此时鼠标又重新回到box上,触发了box的mouseover,也触发了mark的mouseout,也会传播到box的mouseout上,会把mark先删除,然后在创建
  box.onmouseout = function(e){
   e = e || window.event;
   var mark = document.getElementById('mark');
   if(mark){
    this.removeChild(mark);
   }

  }

  //上面代码也可以通过将over和out事件分别改为enter和leave 
  //onmouseenter和onmouseover都是鼠标滑上去的行为,但是onmouseenter浏览器默认阻止了它的冒泡传播(mark的onmouseenter行为触发,不会传播到box);而onmouseover是存在冒泡传播的,想要阻止的话需要手动阻止
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
BootStrap的双日历时间控件使用
Jul 25 #Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 #Javascript
Vue.js学习笔记之修饰符详解
Jul 25 #Javascript
ES6正则表达式扩展笔记
Jul 25 #Javascript
简单实现js拖拽效果
Jul 25 #Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 #Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
You might like
php中注册器模式类用法实例分析
2015/11/03 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python之super的使用小结
2018/08/13 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python实现无边框进度条的实例代码
2020/12/30 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
公司节能减排倡议书
2014/05/14 职场文书
企业负责人任命书
2014/06/05 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
小学记事作文之200字
2019/08/06 职场文书
mysql知识点整理
2021/04/05 MySQL
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server