jQuery小部件smoothDivScroll右侧热点不滚动,只在鼠标移动时缓和

时间:2012-07-05 15:55:45

标签: jquery

我遇到了smoothDivScroll(http://www.smoothdivscroll.com/)的问题。左边的热点工作正常;然而,正确的热点在鼠标悬停时没有任何作用,但确实很轻松(即我设置easingAfterHotSpotScrollingDistance: 100并且在mouseout上它跳得那么多)。我将console.log()添加到smoothDivScroll-1.2.js以记录鼠标悬停和鼠标输出,并且它们在正确的时间触发。

另外,请注意下图:如果我将宽度:10%添加到右侧热点,则背景图像被推向左侧,图像右侧的空白区域在鼠标悬停时工作正常,但鼠标悬停背景图像的区域没有。 Scroller

请参阅以下代码:

调用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%;
}

0 个答案:

没有答案