0

我遇到了 smoothDivScroll ( http://www.smoothdivscroll.com/ ) 的问题。左侧热点工作正常；然而，正确的热点在鼠标悬停时没有任何作用，但确实尊重缓和（即我设置easingAfterHotSpotScrollingDistance: 100并在鼠标悬停时它跳跃那么多）。我在smoothDivScroll-1.2.js 中添加了一个console.log() 来记录mouseover 和mouseout，它们在正确的时间触发。

另外，请注意下图：如果我将宽度：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%;
}
4

0 回答 0