2

マウスオーバー効果またはオンクリックでdivを左または右にスクロールしようとしています。しかし、私は何がうまくいかないのか途方に暮れています。

これを簡単に実行しようとしたのは次のとおりです。

 <head>
    <style>
    #innerscroll{
    margin-right:0px;
    }
    </style>
</head>
<body>
<div id="innerscroll"></div>
<img src="right.jpg" 
onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" />
</body>

今、これを試してみて、なぜうまくいかないのだろうと思っています。私は何を間違っていますか？

また、失敗したより複雑なアプローチも試みました。そのためのコードは次のとおりです。 

    $('.nav-next').click(function(e) {
        e.preventDefault();
        $('#innerscroll').animate({
            'margin-right' : '100px'    
        });                 
    });
    $('.nav-previous').click(function(e) {
        e.preventDefault();
        $('#innerscroll').animate({
            'margin-right' : '-100px'
        });                 
    });

私は十分に具体的ではなかったと思うので、私の最後の質問は閉じられました. 必要な詳細があればお尋ねください。質問を編集します。

編集：jQueryを使用するオプションがありますが、使用したくありません。

Edit2: setInterval を使用して、マウスオーバー効果の時間を計っています。マウスオーバーで動くのか、クリックイベントで動くのか考えています。

4

5 に答える 5

1

.style.paddingRightの代わりに使用する必要があり.style.padding-rightます。jsfiddle

変更されたコード:

<img src="right.jpg" 
onmouseover="onmouseoveronImge();" />

jQueryを使用しているので、以下のようにmouseoverイベントを添付できます

<script>
  $('.nav-next').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '+=100px'    
    });                 
});
$('.nav-previous').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '-=100px'
    });                 
});
 function onmouseoveronImge(){
       $('#innerscroll').animate({
          'margin-left': '+=100px'    
      });
}
</script>

注: setInterval による値の戻り値を使用したくないと思います。なぜそれを使用しているのかを質問で説明する必要があります。

于 2012-10-11T17:24:59.490 に答える
1

私の解決策は、次のように jquery も使用しています。

左移動用と右移動用の 2 つのボタンを使用する

$('#innerscroll').animate({
'marginLeft' : "+=50px"
});

と

$('#innerscroll').animate({
    'marginLeft' : "-=50px"
});

関数を作成して値を渡すことができます。

于 2012-10-11T17:25:53.277 に答える
0

次のようなマークアップがある場合:

<div id="container">
    <div id="content">
    </div>
</div>

またはをpaddingオンに設定すると、インナーは動きません。内側に を設定して横スクロールさせ、外側に を設定します。#container#contentdivmargindivoverlay:hiddendiv

于 2012-10-11T17:29:15.760 に答える
0

まず、jQuery UI ライブラリを使用していますか? あなたの2番目の例はあなたのように見えます。

これを試してみてください。あなたが達成しようとしていることと似たようなことをしますか?

<div id="innerscroll">
  Some Content...
</div>

<div class="nav-next>
  Next
</div>

<div class="nav-previous">
  Previous
</div>

<script type="text/javascript">
  $('.nav-next').click(function(e) {
      $('#innerscroll').animate({
          right: 100    
      });                 
  });

  $('.nav-previous').click(function(e) {
      $('#innerscroll').animate({
          left: 100
      });                 
  });
</script>

そうでない場合、あなたの例はいくつかのことをしているように見えます:

  • CSSでパディングを設定する
  • マウスオーバー時のパディングの設定

それがあなたのやりたいことですか？

于 2012-10-11T17:30:02.177 に答える
0

パディングを負の値にすることはできません。代わりに余白をアニメーション化します。したがって、コードは次のようになります。

 $('.nav-next').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '100px'    
    });                 
});
$('.nav-previous').click(function(e) {
    e.preventDefault();
    $('#innerscroll').animate({
        'margin-left' : '-100px'
    });                 
});​

ここで jsfiddle を使用: http://jsfiddle.net/vqzrY/

于 2012-10-11T17:27:21.050 に答える