JQuery插件平滑分区滚动分步教程

Question

我知道JQuery，正在寻找Smooth Div Scroll的分步教程。我有兴趣将此功能添加到Wordpress的页面中。

以下是我所理解的步骤：

(1)在header中添加以下脚本：

<script type="text/javascript">
$(function() {
$("div#makeMeScrollable").smoothDivScroll();
});
</script>

(2)将css添加到主样式表。

(3)在页面中添加代码

<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="images/demo/image_1.jpg" width="400" height="200" />
<img src="images/demo/image_2.jpg" width="350" height="200" />
<img src="images/demo/image_3.jpg" width="545" height="200" />
<img src="images/demo/image_4.jpg" width="400" height="200" />
<img src="images/demo/image_5.jpg" width="600" height="200" />
</div>
</div>
</div>

这是正确的吗？

Answer 1

嗨，这就是我如何让它工作的！

我在我的“”标签中添加了

 <style type="text/css">
      #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

     #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
</style>

第二，我把这个添加到了！

<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG 
     That way the browser will have loaded the images
     and will know the width of the images. No need to
     specify the width in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

<!-- Smooth Div Scroll 1.2 minified-->
<script src="js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>

<!-- If you want to look at the uncompressed version you find it at
     js/jquery.smoothDivScroll-1.2.js -->


<!-- Plugin initialization -->
<script type="text/javascript">
    // Initialize the plugin with no custom options
    $(document).ready(function () {
        // None of the options are set
        $("div#makeMeScrollable").smoothDivScroll({});
    });
</script>

我设置的选项是覆盖默认值！

然后，我转到我的CSS并添加以下内容

    /* Invisible left hotspot */
    div.scrollingHotSpotLeft
    {
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
   }

  /* Visible left hotspot */
  div.scrollingHotSpotLeftVisible
   {
background-image: url(../images/arrow_left.gif);                
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
    }

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

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

     /* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
   */
   div.scrollWrapper
   {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
   }

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

最后，我将此代码添加到javscript之上，但在head标记下

<div id="makeMeScrollable">
    <img src="images/demo/field.jpg" alt="Demo image" id="field" />
    <img src="images/demo/gnome.jpg" alt="Demo image" id="gnome" />
    <img src="images/demo/pencils.jpg" alt="Demo image" id="pencils" />
    <img src="images/demo/golf.jpg" alt="Demo image" id="golf" />
    <img src="images/demo/river.jpg" alt="Demo image" id="river" />
    <img src="images/demo/train.jpg" alt="Demo image" id="train" />
    <img src="images/demo/leaf.jpg" alt="Demo image" id="leaf" />
    <img src="images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>

Answer 2

从jquery平滑页面中放入head标签中

<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

在身体的某个地方，你想展示这些图像

<div id="makeMeScrollable">
        <img src="images/demo/field.jpg" alt="Demo image" id="field" />
        <img src="images/demo/gnome.jpg" alt="Demo image" id="gnome" />
        <img src="images/demo/pencils.jpg" alt="Demo image" id="pencils" />
        <img src="images/demo/golf.jpg" alt="Demo image" id="golf" />
        <img src="images/demo/river.jpg" alt="Demo image" id="river" />
        <img src="images/demo/train.jpg" alt="Demo image" id="train" />
        <img src="images/demo/leaf.jpg" alt="Demo image" id="leaf" />
        <img src="images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>