jquery вертикальная прокрутка с колесиком мыши - PullRequest
Новая
       11

jquery вертикальная прокрутка с колесиком мыши

2 голосов
/ 20 сентября 2010

У меня есть div, содержащий изображения, которые я хочу прокручивать вверх и вниз, используя плагин jquery mousewheel. Не уверен, как это сделать, документация не очень полезная, буду благодарен за любые предложения. 

<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 ('колесико мыши', функция (событие, дельта) { if (delta> 0) {

} еще {

} });

Ответы [ 2 ]

1 голос
/ 12 марта 2011

Я заметил, что у вас установлен внешний div, чтобы скрыть переполнение, удалите его и добавьте относительную позицию. Затем добавьте div вокруг всего этого со скрытым переполнением.

Тогда вы можете: 

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

Вам понадобится немного логики, чтобы остановить его сверху и снизу. Оператор if, сравнивающий высоту оболочки с container.css (вверху) или .css (внизу). Вы также должны удалить «px» свойства css. 

.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <=
(content_initial_height - slider_height))
1 голос
/ 20 сентября 2010

если вы используете этот файл 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);
    }        
});
...