JavaScript实现跟随鼠标移动的盒子

本文实例为大家分享了JavaScript实现跟随鼠标移动的具体代码，供大家参考，具体内容如下

跟随鼠标移动的盒子(包括检测边界值)

效果图：

代码：

!DOCTYPE htML>
    html lang="en">
     head>
      meta charset="UTF-8">
      meta name="viewport" content="width=device-width, inITial-scale=1.0">
      title>
    Document/title>
    /head>
    style>
  div {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
        background-color: red;
  }
    /style>
     body>
      div>
    111111111/div>
      script>
        VAR div = document.getelementsbytagname('div')[0];
    div.onmousedown = function(e) {
          e = window.event || e;
          // 鼠标按下 获取鼠标距离页面左侧距离      var x = e.clientX;
          // 获取鼠标距离页面上侧距离      var y = e.clientY;
          // 元素距离页面左侧距离      var elex = div.offsetLeft;
          // 元素距离页面上侧距离      var eley = div.offsetTop;
          // 相减得到鼠标距离元素的距离      var X = x - elex;
          var Y = y - eley;
          console.LOG(X, Y);
      document.onmouSEMove = function(e) {
              e = window.event || e;
              // 鼠标移动过程中 获取鼠标距离页面距离          var movex = e.clientX;
              var movey = e.clientY;
              // 1.左侧边界值          // 元素移动过程中距离页面左侧距离          var leftx = movex - X;
              var lefty = movey - Y;
          // 1.左侧边界值          if (leftx = 0) {
                leftx = 0;
          }
          // 2.上侧边界值          if (lefty = 0) {
            lefty = 0          }
              // 3.右侧边界值          // 页面可视区宽 -元素宽          var rightx = document.documentElement.clientWidth - div.offsetWidth;
              if (leftx >
= rightx) {
            leftx = rightx          }
              // 4.下侧边界值          // 页面可视区高 -元素高          var righty = document.documentElement.clientHeight - div.offsetHeight;
              if (lefty >
= righty) {
                lefty = righty;
          }
              // 鼠标移动过程中 获取鼠标距离页面距离 - 鼠标距离元素的距离 =元素的left top值          div.style.left = leftx + 'px';
              div.style.top = lefty + 'px';
           }
        // 抬起清除移动事件      document.onmouseup = function() {
              document.onmousemove = null;
        }
            // 阻止默认事件      return false;
     }
      /script>
    /body>
     /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• javascript实现图片跟随鼠标移动效果的方法
• js+html+css实现鼠标移动div实例
• js实现文字跟随鼠标移动而移动的方法
• js图片跟随鼠标移动代码
• javascript DIV实现跟随鼠标移动
• js实现图片跟随鼠标移动效果
• js实现跟随鼠标移动的小球
• js实现图片放大并跟随鼠标移动特效
• 原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
• Javascript 鼠标移动上去 滑块跟随效果代码分享

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！