简单实现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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
iview table高度动态设置方法
Mar 14 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
深入了解JavaScript词法作用域
Jul 29 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小偷程序)
2014/08/23 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python排序方法实例分析
2015/04/30 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
天游软件面试
2013/11/23 面试题
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
总裁岗位职责
2013/12/04 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
php将xml转化对象的实例详解
2021/11/17 PHP
使用Java去实现超市会员管理系统
2022/03/18 Java/Android