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

我想创建一个效果需要帮助：我做了一个CSS三角形，我希望它固定在Y轴上，但按照鼠标放在他的X轴上（你没看过标题？！）。如果不清楚，我希望它只能移动到左/右，而不是上/下。我设法将我在互联网上找到的js脚本应用到我的三角形，但我无法弄清楚如何改变它以阻止它在Y轴上移动。当我尝试改变任何事情时，整个事情不再发生变化。有人能帮我吗？固定Y轴跟随X轴上的鼠标对象

// 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>

来源

2017-02-11 François Malet

我只是重新格式化了一下，然后评论一条线，它的工作在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定位

来源

2017-02-11 08:43:27 IgnusFast

找不到你的评论，但我用你的脚本更新了小提琴，它不起作用：/ https://jsfiddle.net/eL96o34q/1/编辑：添加HTML内的脚本，它的工作原理，我想这个问题是jquery没有被加载 –

我取消了“好的答案”，因为有一个小问题：div现在离开了它的父div：/ +从右向左移动没有问题，但从左到右有点错误！ –

外挂程序溢出：隐藏到父分区修复了这个问题，我更喜欢这种方式（除了从右边走出去以外），但是从右向左移动仍然是惊人的。编辑：它实际上效果很好，除非你的鼠标与移动的div在同一水平 –

EDIT一个准备功能听者：我找到了解决我的问题的方法。所以这里的问题和我所做的：

我想的要移动的对象仅在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停留在不确定的位置）
我希望它以鼠标为中心而不是在它的右边：original是”div_moving.style.left = mouseXY .xp + 8 +'px';“它使它在当前鼠标的坐标右侧移动8个像素，所以我只是使用了一个负数并放置如下：”div_moving.style.left = mouseXY.xp + -350 + 'px';“

来源

2017-02-11 09:40:48

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

回答

相关问题