JQueryプラグインのステップバイステップチュートリアルスムーズdivスクロール

Question

私はJQueryを知っていて、Smooth Div Scrollのステップバイステップのチュートリアルを探しています。私はこの機能をWordpressのページに追加することに興味があります。私はそれらを理解して

これらは、手順は次のとおりです。

（1）ヘッダに以下のスクリプトを追加します。

<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> 

これは正しいですか？ jqueryのから

Answer 1

は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> 

Answer 2

を表示したい場所をどこか体で こんにちは、これは私はそれが動作するようになった方法です！ちょうど私の "頭" タグ内の

iは

<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> 

私が設定したオプションは、デフォルトを上書きすることです！その後

私はjavscript上ではなく頭のタグの下にこれを追加私の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%; 
    } 

を追加

<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>