PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照：Smooth Div Scroll

▼マウス操作で水平方向にスクロールする画像スライド

デフォルト

マウス操作でスクロールします。

ガウー ぶぅ あたま♥ おまんじゅうみたい ぐすぴー 甲羅干しちぅ お犬さま。lmikimiで遊んでみたw カメラ目線でとれないー 脳天 スフィンクス?! うとうと

カスタマイズ

自動スクロール＆マウス操作で左右にスクロール。自動スクロール時の速度やスクロール方向なども指定可能です。

ガウー ぶぅ あたま♥ おまんじゅうみたい ぐすぴー 甲羅干しちぅ お犬さま。lmikimiで遊んでみたw カメラ目線でとれないー 脳天 スフィンクス?! うとうと

　

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
       <title>設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
      <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" ></script>
      <script type="text/javascript" src="/content/lib/jquery/smoothdivscroll/jquery.smoothDivScroll-1.1.js" ></script>
      <script type="text/javascript">
         $(function() {
            $("#makeMeScrollable1").smoothDivScroll({});
            $("#makeMeScrollable2").smoothDivScroll({ autoScroll:"onstart", autoScrollDirection:"backandforth", autoScrollStep:1, autoScrollInterval:15, startAtElementId:"startAtMe", visibleHotSpots:"always"});
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* 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(lib/jquery/smoothdivscroll/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(lib/jquery/smoothdivscroll/images/move.cur), url(lib/jquery/smoothdivscroll/images/move.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
   background-image:url(lib/jquery/smoothdivscroll/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(lib/jquery/smoothdivscroll/images/big_transparent.gif);
   background-repeat:repeat;
   background-position:center center;
   position:absolute;
   z-index:200;
   right:0;
   cursor:url(lib/jquery/smoothdivscroll/images/move.cur), url(lib/jquery/smoothdivscroll/images/move.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
   background-image:url(lib/jquery/smoothdivscroll/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%;
}
.makeme {
   width:100%;      /* ウィンドウサイズいっぱいに */
   height:240px;   /* 画像の高さ */
   position:relative;
}

.makeme * {
   position:relative;
   float:left;
   margin:0; padding:0;
}
            </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <p>参照：<a href='http://www.smoothdivscroll.com/' target='_blank'>Smooth Div Scroll</a></p>
         <p>▼マウス操作で水平方向にスクロールする画像スライド</p>
<!-- CODE -->
<h2>デフォルト</h2>
<p>マウス操作でスクロールします。</p>
<div id="makeMeScrollable1" class="makeme">
   <div class="scrollingHotSpotLeft"></div>
   <div class="scrollingHotSpotRight"></div>
   <div class="scrollWrapper">
      <div class="scrollableArea">
<img src="http://farm2.static.flickr.com/1207/5110154053_88c5975b25_m.jpg" width="240" height="240" alt="ガウー" />
<img src="http://farm5.static.flickr.com/4088/5106685620_ab9e7f4c2a_m.jpg" width="240" height="240" alt="ぶぅ" />
<img src="http://farm2.static.flickr.com/1192/5106083431_46cf99e9af_m.jpg" width="240" height="240" alt="あたま♥" />
<img src="http://farm2.static.flickr.com/1049/5106604656_9ee3e0355c_m.jpg" width="240" height="240" alt="おまんじゅうみたい" />
<img src="http://farm5.static.flickr.com/4127/5106563750_e1294c6ffb_m.jpg" width="240" height="240" alt="ぐすぴー" />
<img src="http://farm5.static.flickr.com/4107/5105955903_f8a734620d_m.jpg" width="240" height="240" alt="甲羅干しちぅ" />
<img src="http://farm2.static.flickr.com/1052/5104584541_f17c2d9866_m.jpg" width="240" height="240" alt="お犬さま。lmikimiで遊んでみたw" />
<img src="http://farm5.static.flickr.com/4129/5085606708_bdaa8dfb40_m.jpg" width="240" height="240" alt="カメラ目線でとれないー" />
<img src="http://farm5.static.flickr.com/4104/5085007865_b631dac9e2_m.jpg" width="240" height="240" alt="脳天" />
<img src="http://farm5.static.flickr.com/4132/5085575690_5faed36307_m.jpg" width="240" height="240" alt="スフィンクス?!" />
<img src="http://farm5.static.flickr.com/4092/5085574146_15d6f2197d_m.jpg" width="240" height="240" alt="うとうと" />
      </div>
   </div>
</div>
<h2>カスタマイズ</h2>
<p>自動スクロール＆マウス操作で左右にスクロール。自動スクロール時の速度やスクロール方向なども指定可能です。</p>
<div id="makeMeScrollable2" class="makeme">
   <div class="scrollingHotSpotLeft"></div>
   <div class="scrollingHotSpotRight"></div>
   <div class="scrollWrapper">
      <div class="scrollableArea">
<img src="http://farm2.static.flickr.com/1207/5110154053_88c5975b25_m.jpg" width="240" height="240" alt="ガウー" />
<img src="http://farm5.static.flickr.com/4088/5106685620_ab9e7f4c2a_m.jpg" width="240" height="240" alt="ぶぅ" />
<img src="http://farm2.static.flickr.com/1192/5106083431_46cf99e9af_m.jpg" width="240" height="240" alt="あたま♥" />
<img src="http://farm2.static.flickr.com/1049/5106604656_9ee3e0355c_m.jpg" width="240" height="240" alt="おまんじゅうみたい" />
<img src="http://farm5.static.flickr.com/4127/5106563750_e1294c6ffb_m.jpg" width="240" height="240" alt="ぐすぴー" />
<img src="http://farm5.static.flickr.com/4107/5105955903_f8a734620d_m.jpg" width="240" height="240" alt="甲羅干しちぅ" />
<img src="http://farm2.static.flickr.com/1052/5104584541_f17c2d9866_m.jpg" width="240" height="240" alt="お犬さま。lmikimiで遊んでみたw" />
<img src="http://farm5.static.flickr.com/4129/5085606708_bdaa8dfb40_m.jpg" width="240" height="240" alt="カメラ目線でとれないー" />
<img src="http://farm5.static.flickr.com/4104/5085007865_b631dac9e2_m.jpg" width="240" height="240" alt="脳天" />
<img src="http://farm5.static.flickr.com/4132/5085575690_5faed36307_m.jpg" width="240" height="240" alt="スフィンクス?!" />
<img src="http://farm5.static.flickr.com/4092/5085574146_15d6f2197d_m.jpg" width="240" height="240" alt="うとうと" />
      </div>
   </div>
</div>
<p>
   <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("moveToElement", "first");' value="先頭へ" />
   <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("moveToElement", "number", 2);' value="3枚目へ" />
   <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("moveToElement", "last");' value="末尾へ" />　
   <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("startAutoScroll");' value="自動再生開始" />
   <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("stopAutoScroll");' value="自動再生停止" />
</p>
<!-- / CODE -->
      </div>
   </body>
</html>