简单实现js鼠标跟随效果

 更新时间:2017年07月25日 16:01:53   作者:diasa   我要评论
这篇文章主要教大家如何简单实现js鼠标跟随效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 UTC时间转换方法

    详解JavaScript UTC时间转换方法

    这篇文章主要介绍了JavaScript UTC时间转换方法,介绍了本地时间到UTC时间的转换、UTC日期到本地日期的转换,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript数据结构链表知识详解

    JavaScript数据结构链表知识详解

    存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成。下面通过本文给大家详细介绍下,需要的朋友参考下
    2016-11-11
  • Bootstrap 过渡效果Transition 模态框(Modal)

    Bootstrap 过渡效果Transition 模态框(Modal)

    这篇文章主要介绍了Bootstrap 过渡效果Transition 模态框(Modal),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • JS 实现双色表格实现代码

    JS 实现双色表格实现代码

    通过为<tr>元素添加属性或类型选择器,再通过CSS设置可以实现双色表格,但如果表格很长,逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。
    2009-11-11
  • JavaScript数据操作_浅谈原始值和引用值的操作本质

    JavaScript数据操作_浅谈原始值和引用值的操作本质

    下面小编就为大家带来一篇JavaScript数据操作_浅谈原始值和引用值的操作本质。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS实现动态无缝轮播

    JS实现动态无缝轮播

    这篇文章主要为大家详细介绍了JS实现动态无缝轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • javascript高级编程之函数表达式 递归和闭包函数

    javascript高级编程之函数表达式 递归和闭包函数

    这篇文章主要介绍了javascript高级编程之函数表达式 递归和闭包函数的相关资料,需要的朋友可以参考下
    2015-11-11
  • js显示文本框提示文字的方法

    js显示文本框提示文字的方法

    这篇文章主要介绍了js显示文本框提示文字的方法,涉及javascript鼠标事件及样式操作的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • javascript读写json示例

    javascript读写json示例

    JSON是一种简单的数据格式,比xml更轻巧,在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包,下面有个示例,大家可以参考下
    2014-04-04
  • js对象数组和对象的使用实例详解

    js对象数组和对象的使用实例详解

    在本篇文章里小编给大家整理了关于js对象数组和对象的使用实例相关知识点,有需要的朋友们学习下。
    2019-08-08

最新评论