Fatal编程技术网
  • javascript/
  • Javascript 具有固定Y轴且在X轴上跟随鼠标的对象

Javascript 具有固定Y轴且在X轴上跟随鼠标的对象

javascript css

Javascript 具有固定Y轴且在X轴上跟随鼠标的对象,javascript,css,Javascript,Css,我需要帮助我尝试创建一个效果：我制作了一个CSS三角形，我希望它固定在Y轴上，但在X轴上跟随鼠标（你没读标题吗？！）。如果不清楚，我希望它只向左/向右移动，而不是向上/向下移动。我设法将在互联网上找到的js脚本应用于我的三角形，但我不知道如何更改它以阻止它在Y轴上移动。当我试图改变任何东西时，整个东西都不动了。有人能帮我吗 //这里获取要跟随鼠标的Div var div_moving=document.getElementById（'div_moving'）； //在这里添加父元素的ID va

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

//这里获取要跟随鼠标的Div
var div_moving=document.getElementById（'div_moving'）；
//在这里添加父元素的ID
var parent_div='parent_div'；
//对象，使HTML元素跟随鼠标光标（http://coursesweb.net/ )
var movingDiv={
mouseXY:{}，//将在其父对象中包含X，Y鼠标坐标
//获取榆树的X和Y位置（来源：vishalsays.wordpress.com/）
getXYpos：函数（elm）{
x=elm.offsetLeft；//将x设置为elm的offsetLeft
y=elm.offsetTop；//将y设置为elm的offsetTop
elm=elm.offsetParent；//将elm设置为其offsetParent
//使用while循环检查elm是否为null
//如果没有，则将当前elm的offsetLeft添加到x，offsetTop添加到y，并将elm设置为其offsetParent
while（elm！=null）{
x=parseInt（x）+parseInt（elm.offsetLeft）；
y=parseInt（y）+parseInt（elm.offsetTop）；
elm=elm.offsetParent；
}
//返回一个位置为“xp”（左）、“=yp”（顶）的对象
返回{'xp'：x，'yp'：y}；
},
//返回在其父对象中包含X，Y坐标的对象
getCoords:函数（e）{
var xy_pos=这个.getXYpos（e.target）；
//如果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；
}
否则{
x=e.pageX；
y=e.pageY；
}
x=x-xy_位置['xp']；
y=y-xy_位置['yp']；
返回{'xp'：x，'yp'：y}；
}
};
//将“mousemove”事件注册到父级\u div
document.getElementById（parent_div）.addEventListener（'mousemove'，函数（e）{
mouseXY=movingDiv.getCoords（e）；
div_moving.style.left=mouseXY.xp+8+'px'；
div_moving.style.top=mouseXY.yp-8+'px'；
});

#父项{
位置：相对位置；
宽度：100%；
高度：800px；
保证金：1em自动；
边框；1px实心#333；
背景：#fefebe；
}
#分区移动{
位置：绝对位置；
宽度：41em；
高度：31公分；
保证金：0；
边框：1px实心#33f；
背景：#88ee99；
溢出：隐藏；
}
.集装箱{
宽度：37.5em；
身高：37.5公分；
位置：相对位置；
边框顶部：20px实心#e74c3c；
左：3%；
}
.三角形{
位置：相对位置；
保证金：自动；
顶部：-20em；
左：0；
右：0；
宽度：31em；
高度：31公分；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
右边框：20px固体#e74c3c；
边框底部：20px实心#e74c3c；
}



父目录中的内容。。。

我只是重新格式化了一点，然后注释了一行，它在我的机器上的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>




//对象，使HTML元素跟随鼠标光标（http://coursesweb.net/ )
var movingDiv={
mouseXY:{}，//将在其父对象中包含X，Y鼠标坐标
//获取榆树的X和Y位置（来源：vishalsays.wordpress.com/）
getXYpos：函数（elm）{
x=elm.offsetLeft；//将x设置为elm的offsetLeft
y=elm.offsetTop；//将y设置为elm的offsetTop
elm=elm.offsetParent；//将elm设置为其offsetParent
//使用while循环检查elm是否为null
//如果没有，则将当前elm的offsetLeft添加到x，offsetTop添加到y，并将elm设置为其offsetParent
while（elm！=null）{
x=parseInt（x）+parseInt（elm.offsetLeft）；
y=parseInt（y）+parseInt（elm.offsetTop）；
elm=elm.offsetParent；
}
//返回一个位置为“xp”（左）、“=yp”（顶）的对象
返回{'xp'：x，'yp'：y}；
},
//返回在其父对象中包含X，Y坐标的对象
getCoords:函数（e）{
var xy_pos=这个.getXYpos（e.target）；
//如果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；
}
否则{
x=e.pageX；
y=e.pageY；
}
x=x-xy_位置['xp']；
y=y-xy_位置['yp']；
返回{'xp'：x，'yp'：y}；
}
};
$（文档）.ready（函数（）{
//这里得到你想要跟随鼠标的Div
var div_moving=document.getElementById（'div_moving'）；
//在这里添加父元素的ID
var parent_div='parent_div'；
//将“mousemove”事件注册到父级\u div
document.getElementById（parent_div）.addEventListener（'mousemove'，函数（e）{
mouseXY=movingDiv.getCoords（e）；
div_moving.style.left=mouseXY.xp+8+'px'；
//div_moving.style.top=mouseXY.yp-8+'px'；
});
});