0

条件付きのホバーで画像を移動したい：

- マウスが左側から来た場合、画像はマウスから右に 100px 移動し、その逆も同様です。
- ヒット #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 に答える