jquery垂直滚动鼠标滚轮
问题描述:
我有div包含图像,我想上下滚动使用jquery mousewheel插件。不知道如何做到这一点,文件不是很有帮助,将不胜感激的任何建议。jquery垂直滚动鼠标滚轮
<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')。绑定( '鼠标滚轮',功能(事件,三角洲){ 如果(DELTA> 0){
}否则{
} });
答
如果你正在使用此文件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);
}
});
答
我注意到你有最外面的div设置为溢出隐藏,删除和添加的相对位置。 然后在整个事物上添加一个div,并在其上面隐藏溢出。
然后,您可以:
if (delta > 0){$(this).css({"top":+=40,"bottom":-=40});}
else{$(this).css({"top":-=40,"bottom":+=40});}
你需要一些逻辑,在顶部和底部停止它虽然。一个if语句,将包装的高度与container.css(顶部)或.css(底部)进行比较。你必须去掉css属性的“px”。
.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <=
(content_initial_height - slider_height))
我可以看到第一个问题是,你有'$( 'innerScroll')'这将仅拾取innerScroll元件,即'富 innerScroll>'。你需要带有* class * innerScroll的元素,所以它应该是'$('。innerScroll')' –
2013-04-15 10:03:22