随鼠标移动的效果

morrisonwu 2011-12-28 10:15:36

<div id="DIV1" style="position:relative; width:500px;">
<div id="DIV2" style="position:absolute;width:30px; top:-10px; left:0px"></div>
</div>

现在要实现的效果是：当在DIV1内移动鼠标时候，DIV2随着鼠标的移动而移动，并得到DIV2距离DIV1左侧的距离，这个我已经实现了
function rate(obj, oEvent) {
var e = window.event;

document.getElementById("DIV2").style.left = e.offsetX;
}
但如果鼠标移动到DIV2内时候，DIV2就跑到了DIV1的左边去了，怎样才能鼠标移动到DIV2上面也能正常移动
下面是效果图

...全文

154 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

chenlin1019 2011-12-28

打赏
举报



 //为什么不可以呢，你的DIV1里面onmousemove事件下调用tate（）,我这边测试没问题，LZ还是贴下自己代码吧

 <html>

  <head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

     <title></title>

  </head>

  <body>

     <div id="DIV1" style="position:relative; width:303px; margin-top:200px" onmousemove="rate('DIV2',event)">

       <img src="20111228-1.png" alt="" />

       <div id="DIV2" style="position:absolute; top:-34px; left:0px;">

         <img src="20111228-2.png" alt="" />

       </div>

     </div>

   <script type="text/javascript">

      function rate(obj, oEvent) {

      var e = window.event||oEvent; 

        document.getElementById(obj).style.left =e.clientX>=264?264:e.clientX;

      }

   </script>

  </body>

</html>

morrisonwu 2011-12-28

打赏
举报

[Quote=引用 6 楼 chenlin1019 的回复:]

lz，你改下写rate函数，将e.offsetX换成e.clientX就可以了。
备注：
event.offsetX 解释为相对于触发事件的对象，鼠标的水平坐标；
event.clientX 解释为鼠标在窗口客户区域的水平坐标。
[/Quote]

clientX不行的，是按照窗口的，我要按照父DIV来

chenlin1019 2011-12-28

打赏
举报

lz，你改下写rate函数，将e.offsetX换成e.clientX就可以了。
备注：
event.offsetX 解释为相对于触发事件的对象，鼠标的水平坐标；
event.clientX 解释为鼠标在窗口客户区域的水平坐标。

chenlin1019 2011-12-28

打赏
举报

诺维斯基 2011-12-28

打赏
举报

把你全部的代码，都贴出来。

chenlin1019 2011-12-28

打赏
举报

LZ,你改写下你的rate函数，将e.offsetX换成e.clientX就可以了。

诺维斯基 2011-12-28

打赏
举报

把你全部的js代码，还有html代码，都贴出来。

persuit666 2011-12-28

打赏
举报

禁止冒泡看看，因为你在div2 上移动的时候也是在div1上移动，但是这个事件是div2的事件，所以e.offsetX;
就成了鼠标距离div2左侧的距离

function rate(obj, oEvent) {
var e = window.event;

document.getElementById("DIV2").style.left = e.offsetX;
}
改成
function rate(obj, oEvent) {
var e = oEvent?oEvent:window.event;
if(window.event)
e.stopPropagation();
else
e.cancelBubble=true;
document.getElementById("DIV2").style.left = e.offsetX;
}

zhongweng 2011-12-28

打赏
举报



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

    <title></title>

    <style>

        *

        {

            margin: 0px;

        }

    </style>



    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>



    <script type="text/javascript">

        $(function($) {

            $("#DIV1").mousemove(function(event) {

                var event = window.event || event;

                var x = event.offsetX || event.clientX;

                $("span").html("左边距：" + x);

                $("#DIV2").css("left", x);

            });

        });

    </script>



</head>

<body>

    <div id="DIV1" style="position: absolute; width: 500px; height: 20px; background: #ccc;

        top: 20px;">

    </div>

    <div id="DIV2" style="position: absolute; width: 5px; height: 20px; background: red;

        top: 0px; left: 0px">

    </div>

    <span style="margin-top: 50px; float: left;"></span>

</body>

</html>