2

jquery マウスホイール プラグインを使用して上下にスクロールしたい画像を含む div があります。これを行う方法がわからない場合、ドキュメントはあまり役に立ちません。提案に感謝します。

<div class="innerScroll" style="float:left;width:448px;height:500px; overflow:hidden;">
<div class="mediaPanel"><img src="media/poster_silence.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>


<script type="text/javascript">

$('innerScroll').bind('mousewheel', function(event,delta){ if (delta > 0) {

} そうしないと {

} });

4

2 に答える 2

2

このファイルを使用している場合jQuery_mousewheel_plugin.js

$('.innerScroll').mousewheel(function(event,delta){

    var media = $(this).find('.mediaPanel');
    if (delta > 0) {
        media.css('top', parseInt(media.css('top'))+40);
    } else {
        media.css('top', parseInt(media.css('top'))-40);
    }        
});

編集：

これは古い答えですが、アップロードしたデモに訪問者がいて404が返されました。コードを再度アップロードしましたが、機能していなかったため、コードを少し変更しました。これが機能しているバージョンです。

$(document).ready(function(){
    $('.innerScroll').mousewheel(function(event, delta){
        var self = $(this);
        var scrollTop = self.prop('scrollTop');
        if (delta < 0) {
            self.prop('scrollTop', scrollTop + 40);
        } else {
           self.prop('scrollTop', scrollTop - 40);
        }
    });
});

jQueryマウスホイールのコピーは、npmにあり、unpkgからアクセスできる私のオープンソースプロジェクトの1つにあります。

https://unpkg.com/jquery.terminal/js/jquery.mousewheel-min.js

デモが機能し、同じ場所にあります。

https://jcubic.pl/mousewheel.html

于 2010-09-19T22:31:41.850 に答える
1

最も外側の div がオーバーフロー非表示に設定されていることに気付きました。それを削除して、相対的な位置を追加します。次に、全体に div を追加し、オーバーフローを非表示にします。

次に、次のことができます。

if (delta > 0){$(this).css({"top":+=40,"bottom":-=40});}
else{$(this).css({"top":-=40,"bottom":+=40});}

ただし、上下で停止するためのロジックが必要です。ラッパーの高さを container.css(top) または .css(bottom) と比較する if ステートメント。css プロパティの「px」も削除する必要があります。

.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <=
(content_initial_height - slider_height))
于 2011-03-11T22:38:06.917 に答える