我遇到了smoothDivScroll(http://www.smoothdivscroll.com/)的问题。左边的热点工作正常;然而,正确的热点在鼠标悬停时没有任何作用,但确实很轻松(即我设置easingAfterHotSpotScrollingDistance: 100
并且在mouseout上它跳得那么多)。我将console.log()添加到smoothDivScroll-1.2.js以记录鼠标悬停和鼠标输出,并且它们在正确的时间触发。
另外,请注意下图:如果我将宽度:10%添加到右侧热点,则背景图像被推向左侧,图像右侧的空白区域在鼠标悬停时工作正常,但鼠标悬停背景图像的区域没有。
请参阅以下代码:
调用smoothDivScroll()之后的HTML:
<ul class="quicktabs-tabs quicktabs-style-nostyle">
<div class="scrollingHotSpotLeft scrollingHotSpotLeftVisible" style=""></div>
<div class="scrollingHotSpotRight scrollingHotSpotRightVisible" style=""></div>
<div class="scrollWrapper">
<div class="scrollableArea" style="width: 1173px; ">
<li class="active first"><a href="/drupal-7.14/general?qt-view__show_history__block=0#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-0" class="active quicktabs-loaded jquery-once-2-processed">1972</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=1#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-1" class="active jquery-once-2-processed">1984</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=2#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-2" class="active jquery-once-2-processed">1991</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=3#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-3" class="active jquery-once-2-processed">1994</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=4#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-4" class="active jquery-once-2-processed">1996</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=5#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-5" class="active jquery-once-2-processed">1997</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=6#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-6" class="active jquery-once-2-processed">1998</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=7#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-7" class="active jquery-once-2-processed">2000</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=8#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-8" class="active jquery-once-2-processed">2001</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=9#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-9" class="active jquery-once-2-processed">2002</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=10#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-10" class="active jquery-once-2-processed">2003</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=11#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-11" class="active jquery-once-2-processed">2004</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=12#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-12" class="active jquery-once-2-processed">2005</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=13#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-13" class="active jquery-once-2-processed">2006</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=14#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-14" class="active jquery-once-2-processed">2008</a></li>
<li><a href="/drupal-7.14/general?qt-view__show_history__block=15#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-15" class="active jquery-once-2-processed">2011</a></li>
<li class="last"><a href="/drupal-7.14/general?qt-view__show_history__block=16#qt-view__show_history__block" id="quicktabs-tab-view__show_history__block-16" class="active jquery-once-2-processed">2012</a></li>
</div>
</div>
</ul>
使用Javascript:
jQuery(document).ready(function($){
$(".quicktabs-tabs").smoothDivScroll({
mousewheelScrolling: true,
visibleHotSpotBackgrounds: 'always',
hotSpotScrollingStep:1,
hotSpotScrollingInterval:15,
autoScrollingMode: "",
manualContinuousScrolling: true,
easingAfterHotSpotScrollingDistance: 100,
});
});
CSS:
.scrollingHotSpotLeft {
position: absolute;
left: 0;
width: 90px;
height: 106px;
background: transparent url(../img/show-history-arrow_sprite.gif) 0 -110px no-repeat;
}
.scrollingHotSpotRight {
position: absolute;
z-index: 99;
right: 0;
width: 90px;
height: 106px;
background-image: url(../img/show-history-arrow_sprite.gif) no-repeat;
background-repeat: no-repeat;
background-position: 47px 0;
}
div.scrollWrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea {
position: relative;
width: auto;
height: 100%;
}