Question

我需要帮助才能创建一个效果：我制作了一个CSS三角形，我希望它固定在Y轴上，但是在他的X轴上跟着鼠标（你没看过标题吗？？！）。如果不清楚，我希望它只向左/右移动但不向上/向下移动。我设法将我在互联网上找到的js脚本应用到我的三角形但我无法弄清楚如何更改它以阻止它在Y轴上移动。当我试图改变任何东西时，整个事情就不再动了。有人可以帮助我吗？

// Here get the Div that you want to follow the mouse
var div_moving = document.getElementById('div_moving');

// Here add the ID of the parent element
var parent_div = 'parent_div';

// object to make a HTML element to follow mouse cursor ( http://coursesweb.net/ )
var movingDiv = {
  mouseXY: {},  // will contain the X, Y mouse coords inside its parent

  // Get X and Y position of the elm (from: vishalsays.wordpress.com/ )
  getXYpos: function(elm) {
    x = elm.offsetLeft;        // set x to elm’s offsetLeft
    y = elm.offsetTop;         // set y to elm’s offsetTop

    elm = elm.offsetParent;    // set elm to its offsetParent

    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x, offsetTop to y and set elm to its offsetParent
    while(elm != null) {
      x = parseInt(x) + parseInt(elm.offsetLeft);
      y = parseInt(y) + parseInt(elm.offsetTop);
      elm = elm.offsetParent;
    }

    // returns an object with "xp" (Left), "=yp" (Top) position
    return {'xp':x, 'yp':y};
  },

  // Returns object with X, Y coords inside its parent
  getCoords: function(e) {
    var xy_pos = this.getXYpos(e.target);

    // if IE
    if(navigator.appVersion.indexOf("MSIE") != -1) {
      var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

      x = event.clientX + standardBody.scrollLeft;
      y = event.clientY + standardBody.scrollTop;
    }
    else {
      x = e.pageX;
      y = e.pageY;
    }

    x = x - xy_pos['xp'];
    y = y - xy_pos['yp'];

    return {'xp':x, 'yp':y};
  }
};


// registers 'mousemove' event to parent_div
document.getElementById(parent_div).addEventListener('mousemove', function(e){
  mouseXY = movingDiv.getCoords(e);
  div_moving.style.left = mouseXY.xp + 8 +'px';
  div_moving.style.top = mouseXY.yp - 8 +'px';
});

#parent_div {
  position: relative;
  width: 100%;
  height: 800px;
  margin: 1em auto;
  border; 1px solid #333;
  background: #fefebe;
}
#div_moving {
  position: absolute;
  width: 41em;
  height: 31em;
  margin: 0;
  border: 1px solid #33f;
  background: #88ee99;
  overflow:hidden;
}
.container {
    width: 37.5em;
    height: 37.5em;
    position: relative;
    border-top: 20px solid #e74c3c;
    left:3%;
}

.triangle {
    position: relative;
    margin: auto;
    top: -20em;
    left: 0;
    right: 0;
    width:31em;
    height:31em;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-right: 20px solid #e74c3c;
    border-bottom: 20px solid #e74c3c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent_div">
  <div id="div_moving">
    <div class="container">
      <div class="triangle"></div>
    </div>
  </div>
  Content in parent ...
</div>

Answer 1

我只是重新格式化了一下，然后评论了一行，它在我的机器上的Chrome中工作。这是你正在寻找的吗？

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script language="javascript">
            // object to make a HTML element to follow mouse cursor ( http://coursesweb.net/ )
            var movingDiv = {
              mouseXY: {},  // will contain the X, Y mouse coords inside its parent

              // Get X and Y position of the elm (from: vishalsays.wordpress.com/ )
              getXYpos: function(elm) {
                x = elm.offsetLeft;        // set x to elm’s offsetLeft
                y = elm.offsetTop;         // set y to elm’s offsetTop

                elm = elm.offsetParent;    // set elm to its offsetParent

                //use while loop to check if elm is null
                // if not then add current elm’s offsetLeft to x, offsetTop to y and set elm to its offsetParent
                while(elm != null) {
                  x = parseInt(x) + parseInt(elm.offsetLeft);
                  y = parseInt(y) + parseInt(elm.offsetTop);
                  elm = elm.offsetParent;
                }

                // returns an object with "xp" (Left), "=yp" (Top) position
                return {'xp':x, 'yp':y};
              },

              // Returns object with X, Y coords inside its parent
              getCoords: function(e) {
                var xy_pos = this.getXYpos(e.target);

                // if IE
                if(navigator.appVersion.indexOf("MSIE") != -1) {
                  var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

                  x = event.clientX + standardBody.scrollLeft;
                  y = event.clientY + standardBody.scrollTop;
                }
                else {
                  x = e.pageX;
                  y = e.pageY;
                }

                x = x - xy_pos['xp'];
                y = y - xy_pos['yp'];

                return {'xp':x, 'yp':y};
              }
            };

            $(document).ready(function() {
                // Here get the Div that you want to follow the mouse
                var div_moving = document.getElementById('div_moving');

                // Here add the ID of the parent element
                var parent_div = 'parent_div';
                // registers 'mousemove' event to parent_div
                document.getElementById(parent_div).addEventListener('mousemove', function(e){
                  mouseXY = movingDiv.getCoords(e);
                  div_moving.style.left = mouseXY.xp + 8 +'px';
                  //div_moving.style.top = mouseXY.yp - 8 +'px';
                });
            });
        </script>
        <style>
            #parent_div {
              position: relative;
              width: 100%;
              height: 800px;
              margin: 1em auto;
              border; 1px solid #333;
              background: #fefebe;
            }
            #div_moving {
              position: absolute;
              width: 41em;
              height: 31em;
              margin: 0;
              border: 1px solid #33f;
              background: #88ee99;
              overflow:hidden;
            }
            .container {
                width: 37.5em;
                height: 37.5em;
                position: relative;
                border-top: 20px solid #e74c3c;
                left:3%;
            }

            .triangle {
                position: relative;
                margin: auto;
                top: -20em;
                left: 0;
                right: 0;
                width:31em;
                height:31em;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                border-right: 20px solid #e74c3c;
                border-bottom: 20px solid #e74c3c;
            }
        </style>
    </head>
    <body>
        <div id="parent_div">
          <div id="div_moving">
            <div class="container">
              <div class="triangle"></div>
            </div>
          </div>
          Content in parent ...
        </div>
    </body>
</html>

的差异：

首先加载JQuery脚本
在就绪函数中处理侦听器，以便已加载所有内容
注释Y定位

Answer 2

编辑：我找到了解决问题的方法。所以问题和我做了什么：

我希望对象只在X轴而不是Y上移动：IgnusFast发现要删除的行是“div_moving.style.top = mouseXY.yp - 8 +'px';”
我希望它在鼠标经过时停止交错：删除“while（elm！= null）{x = parseInt（x）+ parseInt（elm.offsetLeft）”中的“parseInt（x）+” ; elm = elm.offsetParent;}“（使div在不确定时保持原状。
我希望它以鼠标为中心而不是右侧：原来是“div_moving.style.left = mouseXY.xp + 8 +'px';”它使它在当前鼠标坐标的右边8个像素，所以我只使用了一个负数并且这样的位置：“div_moving.style.left = mouseXY.xp + -350 +'px';”
< / LI>

在X轴上跟随鼠标的固定Y轴的对象

2 个答案: