JS实现的鼠标跟随代码,实例讲解

时间:2019-06-12 23:08来源:亚洲城ca88唯一官方网站
你也许感兴趣的篇章: js鼠标跟随运动作效果果 原生js完结鼠标跟随效果 javascript鼠标跟随运动3种作用(眼球效应,苹果菜单,方向跟随) JS完成的简约鼠标跟随DiV层效果总体实例 JS完毕

你也许感兴趣的篇章:

  • js鼠标跟随运动作效果果
  • 原生js完结鼠标跟随效果
  • javascript鼠标跟随运动3种作用(眼球效应,苹果菜单,方向跟随)
  • JS完成的简约鼠标跟随DiV层效果总体实例
  • JS完毕的鼠标跟随代码(卡通手型点击效果)
  • js实现轻便鼠标跟随效果的章程
  • Js鼠标跟随代码小手点击实例方法
  • 简短达成js鼠标跟随效果

二个跟随鼠标的小手效果,鼠标移在哪个地方,小手就跟着移向哪儿,会出现手的功力,放在链接上的时候,手会扭转,两手很讨人喜欢啊,JS鼠标跟随代码分享与我们。

上述正是本文的全部内容,希望对大家的就学抱有扶助,也盼望我们多多补助脚本之家。

废话非常少说,直接上代码

在线演示地址如下:

您只怕感兴趣的小说:

  • js案例之鼠标跟随jquery版(实例批注)
  • js鼠标跟随运动作效果果
  • 原生js实现鼠标跟随效果
  • javascript鼠标跟随运动3种效应(眼球效应,苹果菜单,方向跟随)
  • JS达成的简易鼠标跟随DiV层效果总体实例
  • JS完毕的鼠标跟随代码(卡通手型点击效果)
  • js达成简单鼠标跟随效果的点子
  • Js鼠标跟随代码小手点击实例方法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body,div{
      margin:0;
      padding:0;
    }
    img{
      display:block;
      border:none;
    }
    .box{
      position:relative;
      width:450px;
      margin:20px auto;
    }
    .box img{
      float:left;
      margin-left:10px;
      width:100px;
      height:75px;
      border:1px solid #008000;
    }
    #mark{
      display:none;
      position:absolute;
      top:0;
      left:0;
      z-index:10;
      width:400px;
      height:300px;
      border:1px solid #0077b0;
    }
    #mark img{
      float:inherit;
      margin-left:0;
      border:none;
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <div class='box' id='box'>
    <img src="img/apple_1.jpg" alt="亚洲城ca88唯一官方网站 1" bigImg='img/apple_1_bigger.jpg'>
    <img src="img/apple_2.jpg" alt="亚洲城ca88唯一官方网站 2" bigImg='img/apple_2_bigger.jpg'>
    <img src="img/apple_3.jpg" alt="亚洲城ca88唯一官方网站 3" bigImg='img/apple_3_bigger.jpg'>
    <img src="img/apple_4.jpg" alt="亚洲城ca88唯一官方网站 4" bigImg='img/apple_4_bigger.jpg'>
    <div id='mark'>
      <img src="img/apple_1_bigger.jpg" alt="亚洲城ca88唯一官方网站 5">
    </div>
  </div>

  <script src='js/jquery-1.11.3.min.js'></script>
  <script>
    $(function(){
      var $box = $("#box"),$mark = $("#mark");
      var $boxOffset = $box.offset();//获取当前元素的距离body的偏移
      $box.children("img").bind("mouseover",function(e){
        var e = e || window.event;
        e.target = e.target || e.srcElement;
        var left = e.clientX - $boxOffset.left 10;
        var top = e.clientY - $boxOffset.top 10;
        $mark.stop().show(500).css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg"));

      }).bind("mousemove",function(e){
        var e = e || window.event;
        e.target = e.target || e.srcElement;
        var left = e.clientX - $boxOffset.left 10;
        var top = e.clientY - $boxOffset.top 10;
        $mark.css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg"));

      }).bind("mouseout",function(e){
        $mark.stop().hide(500);

      })


    })
  </script>
</body>
</html>

运作效果截图如下:

亚洲城ca88唯一官方网站,正文实例为咱们享受了js鼠标跟随效果呈现的现实性代码,供我们参照他事他说加以考查,具体内容如下

上述那篇js案例之鼠标跟随jquery版(实例批注)正是作者分享给大家的全体内容了,希望能给大家二个参照,也期待我们多多帮忙脚本之家。

你只怕感兴趣的稿子:

  • js案例之鼠标跟随jquery版(实例讲授)
  • js鼠标跟随运动作效果果
  • 原生js实现鼠标跟随效果
  • javascript鼠标跟随运动3种成效(眼球效应,苹果菜单,方向跟随)
  • JS完毕的大约鼠标跟随DiV层效果总体实例
  • js达成简单鼠标跟随效果的点子
  • 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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可爱的鼠标跟随</title>
<style>
html{ background:#000;}
body,html,input{ cursor:none;}
body,html{ height:100%;}
#cursor{ position:absolute; left:100px; top:100px; display:block;}
</style>
<script>
 window.onload = function(){
  var oCursor = document.getElementById("cursor");
  document.onmousemove=function (ev){
   var oEvent=ev||event,
    oWidth = document.documentElement.clientWidth,
    oHeight = document.documentElement.clientHeight,
    scrollTop=document.documentElement.scrollTop   oEvent.clientY,
    scrollLeft=document.documentElement.scrollLeft   oEvent.clientX;
   if(scrollTop > oHeight-oCursor.offsetHeight){
    oCursor.style.top = oHeight-oCursor.offsetHeight 'px';
   }else if(scrollTop < 0){
    oCursor.style.top = 0;
   }else{
    oCursor.style.top = scrollTop 'px';
   }
   if(scrollLeft > oWidth-oCursor.offsetWidth){
    oCursor.style.left = oWidth-oCursor.offsetWidth 'px';
   }else{
    oCursor.style.left = scrollLeft 'px';
   }
   document.onmousedown = function(){
    oCursor.innerHTML = "<img src='images/cursor_hover.png' />"; 
    return false;
   }
   document.onmouseup = function(){
    oCursor.innerHTML = "<img src='images/cursor.png' />"; 
   }
  };
 }
</script>
</head>
<body>
<div id="cursor"><img src="images/cursor.png" /></div>
<input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.baidu.com')" />
</body>
</html>

本文实例讲述了JS完毕带有小手点击效果的鼠标跟随代码。分享给我们供大家参谋,具体如下:

期望本文所述对大家JavaScript程序设计有着扶助。

亚洲城ca88唯一官方网站 6

现实代码如下:

编辑:亚洲城ca88唯一官方网站 本文来源:JS实现的鼠标跟随代码,实例讲解

关键词: 亚洲城ca88