【问题标题】:Smooth Div Scroll Left Hot Spot is Showing Cursor, but not scrolling and Right is Overly FastSmooth Div Scroll Left Hot Spot 显示光标,但不滚动且向右过快
【发布时间】:2012-09-07 23:27:50
【问题描述】:

所以,我已将 Thomas Kahn 的 Smooth Div Scroll 实现到 Wordpress 主题中,然后使用 Zenfolio 插件来显示来自 Zenfolio 画廊的滚动图像。 Zenfolio 插件似乎工作正常,但 Smooth Div Scroll 似乎无法正常工作。它的自动滚动很好,但左边的热点出现了,但没有响应,右边的热点使滚动速度过快。你可以检查代码,但我的设置真的很慢,它不应该移动那么快。

这是我正在使用的代码:

HTML:

<div id="feature-slideshow">
<div id="makeMeScrollable">
    <img src="http://wiltonphotography.zenfolio.com/img/s11/v27/p1106836720-4.jpg?sn="  class="portfolio-img">
    <img src="http://wiltonphotography.zenfolio.com/img/s1/v55/p1106836968-4.jpg?sn="  class="portfolio-img">
    <img src="http://wiltonphotography.zenfolio.com/img/s2/v58/p1106833686-4.jpg?sn="  class="portfolio-img">
    <img src="http://wiltonphotography.zenfolio.com/img/s1/v55/p1106834346-4.jpg?sn="  class="portfolio-img">
    <img src="http://wiltonphotography.zenfolio.com/img/s4/v62/p1106834158-4.jpg?sn="  class="portfolio-img">
    <img src="http://wiltonphotography.zenfolio.com/img/s2/v61/p1106834196-4.jpg?sn="  class="portfolio-img">
    <img src="http://wiltonphotography.zenfolio.com/img/s2/v58/p1106834786-4.jpg?sn="  class="portfolio-img">
    <!-- /zfp_photoset -->
</div>
</div>

CSS:

#makeMeScrollable { width:100%; height: 630px; position: relative; }
#makeMeScrollable div.scrollableArea img { display: none; position: relative; float: left; margin: 0; padding: 0 50px 0 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
#makeMeScrollable div.scrollableArea img:first-child { padding-left: 340px; }

/* Invisible left hotspot */
div.scrollingHotSpotLeft { min-width: 50px; width: 10%; height: 100%; background-image: url(img/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; cursor: url(img/cursors/cursor_arrow_left.png), url(img/cursors/cursor_arrow_left.cur),w-resize; }

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible { background-image: url(img/arrow_left.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; -moz-opacity: 0.35; filter: alpha(opacity = 35); zoom: 1; }

/* Invisible right hotspot */
div.scrollingHotSpotRight { min-width: 50px; width: 10%; height: 100%; background-image: url(img/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url(img/cursors/cursor_arrow_right.png), url(img/cursors/cursor_arrow_right.cur),e-resize; }

/* Visible right hotspot */
div.scrollingHotSpotRightVisible { background-image: url(img/arrow_right.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; -moz-opacity: 0.35; filter: alpha(opacity = 35); zoom: 1; }

div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }
div.scrollableArea { position: relative; width: auto; height: 100%; }

JS:

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // None of the options are set
        $("div#makeMeScrollable").smoothDivScroll({
            mousewheelScrolling: true,
            hotSpotScrollingStep: 5,
            visibleHotSpotBackgrounds: "",
            autoScrollingMode: "onstart"
        });
    });
</script>

你可以在这里看到问题:traviswilton.com

谁能看出我哪里出错了?谢谢!

【问题讨论】:

    标签: jquery jquery-plugins smooth-scrolling


    【解决方案1】:

    事实证明,Smooth Div Scroll jQuery 与我使用的 Google CSS3 Media Queries JS 的交互很差。我尝试更改级联顺序,但似乎没有用。对于这个网站,CSS3 Media Queries JS 不是必需的,所以我把它去掉了,它 Smooth Div Scroll 工作正常。

    这不是一个大问题,但如果 Smooth Div Scroll 或 CSS3 Media Queries 能解决它会很好。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-23
      相关资源
      最近更新 更多