1

コンテナー div 内にある div を、X 軸上でマウスの反対方向 (左右のみ) に移動させようとしています。

これは私がこれまでに持っているものです:

html

<div class="container">
    <div class="box"></div>
</div>

CSS

.container { width: 450px; height: 52px; border: 1px #000 solid; position: relative; }
.box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; right: 200px; }

jquery

$(document).ready(function(){
  $('div.container').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
      if ($('div.box').css('right') <= '400') {
          $('div.box').css({'right': x}); 
      }
  });
});

JSfiddle - http://jsfiddle.net/eyalbin/qQmu7/49/

何らかの理由で、数秒後に機能が停止します。

誰でも助けてください

4

4 に答える 4

2

これを試してください：JSFiddle

あなたが書いた

if ($('div.box').css('right') <= '400')

それ以外の

if (x <= 400)

:)

于 2013-10-09T11:24:40.427 に答える
0

これでできるはず

$(document).ready(function(){
  $('div.container').mousemove(function(e){
      var x = e.pageX - this.offsetLeft;
      if ((x <= 400)) {
          $('div.box').css({'right': x}); 
      }
  });
});

フィドル

于 2013-10-09T11:24:37.447 に答える
0 
$('#parent .child').mousemove( function(e) {


       var parent_x = this.offsetLeft; //get parent position
       var parent_y = this.offsetTop;      

       var mouseX   =  e.pageX; //get mouse move position
       var mouseY   =  e.pageY;

       var boxPositionX = mouseX-parent_x+5;
       var boxPositionY = mouseY-parent_y+5;

       $('.hover-box',this).css({'top': boxPositionY,'left': boxPositionX});
    });

///////// CSS

.hover-box{
   position:absolute;
}
于 2015-04-27T15:59:28.780 に答える