3

jQuery で少し問題が発生しました。皆さんが助けてくれるかもしれません。理解を深めるために、jfiddle の HTML マークアップを次に示します。

jsfiddle

#move_me という div を使用して、 内#content_wrapperのマウスの位置に応じて内で右または左に移動したいと思い#content_wrapperます。

基本的に私が望むのは、カーソルを#content_wrapperdiv内で右に#move_me移動すると、divが左に移動してcontent2 divが表示され、左に移動すると#move_me divが右に移動してcontent1 divが表示されることです。 .

mousemove と pageXoffset で動作させようとしましたが、動作しませんでした。

このようなもの：

$('#content_wrapper').mousemove(function(e){
var x = e.pageX - this.parentoffsetLeft;
$('#move_me').css({'left': x}); 
});

より正確に説明する画像は次のとおりです。

イラスト http://www.22labs.com/moveme.jpg

4

3 に答える 3

7

ワーキングデモ

これを試して

私はこれがあなたが必要とするものだと思います,position:relative;あなたに追加move_me

コード

$('#content_wrapper').mousemove(function (e) {

    $('#move_me').animate({
        'left': -e.pageX + 15 + 'px'
    }, 0);

});

これが役に立てば幸いです、ありがとう

于 2013-11-02T12:12:51.700 に答える
2

私は部分的に解決策を書きました。これがあなたが必要とするものであることを願っています。

http://jsfiddle.net/NukSy/4/

$('div#content1').mousemove(function(p) {     
    $("div#content1").css('left', p.pageX + moveLeft);
    $("div#content2").animate({left: "0px"}, 500);
  });

よろしく:)）

于 2013-08-20T15:54:29.743 に答える
0 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("div").attr("style","padding-left:"+event.pageX+"px; padding-top:"+event.pageY+"px");
});
});
</script>

<div style="">
<form>
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<input type="submit" value="submit"/>
</form>
</div>
于 2013-11-02T10:51:06.100 に答える