0

我希望图像在悬停条件下移动：

- 如果鼠标来自左侧，图像会从鼠标向右移动 100 像素，反之亦然。
- 图像可以连续向一个方向移动，当点击#div边界时会移动到相反的方向。

我几乎想不出将它组合起来，这里是我的基本代码：

在悬停时移动图像

$(document).ready(function()
{  $("#image").mouseover(function()
   {  $("#image").animate({left:'250px'});
   });
});

在悬停时捕捉鼠标位置

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

。任何帮助，将不胜感激。谢谢

4

1 回答 1

0

你可以把你的图像放在一个由 1px 宽边框 div 填充的 div 中。将鼠标悬停侦听器附加到每个侦听器，例如将左入口侦听器附加到左侧 div，将右入口侦听器附加到右侧 div 等等。

HTML：

<div id="box" style="background:#98bf21;height:100px;position: absolute;left:100px; width:200px;">
<div id="skinDiv">
    <div id="leftboundary"></div>
</div>
</div>

CSS：

#leftboundary{
    height:100%;
    width:20px;
    position:absolute;
    top:0px;
    right:0px;
    background:blue;
}

这是从我回答的另一个问题中重复使用的短小提琴：http: //jsfiddle.net/PRZYN/10/

编辑：改进的小提琴：http: //jsfiddle.net/PRZYN/11/

于 2012-11-21T09:11:10.213 回答