小雕雕的家

就......無聊練習一下JQuery的 scroll 操作

這個範例是這樣子的，請看 demo (這個免費空間還蠻好用)

就是假設你的網站內容很寬且寬到爆，想要讓人在一張大網頁上瀏覽

"類似" 這網站 的捲動，但是人家寫得當然比較好，因為她有去算每個div內容距離邊邊的寬度

反正只是練習嘛.......

或者你想要做個橫向瀏覽的圖片 slideshow (可以自己在左右兩邊加上浮動箭頭看起來會比較有質感)

首先使用 CDN 載入 JQuery 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTML 如下

<input type="button" id="left" value="左" />
<input type="button" id="right" value="右" />
<div id="main" style="margin: 50px auto; overflow: hidden; width: 100%; height: 600px;">
<div style="width: 4200px;">
<div class="left">1<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">2<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">3<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">4<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">5<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">6<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">7<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">8<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">9<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">10<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">11<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">12<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">13<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
<div class="left">14<br /><img src="doraemon.jpg" alt="" width="300px" /></div>
</div>
</div>

js 如下

$(document).ready(function(){
 var docw = $(document).width() - 100;
 $("#right").click(function(){
	$("#main").animate({
		scrollLeft: $("#main").scrollLeft() + docw
	}, 700,function(){});   
 });
 $("#left").click(function(){
	$("#main").animate({
		scrollLeft: $("#main").scrollLeft() - docw
	}, 700,function(){});   
 });

});

上面的code應該不用解釋......好吧我承認我是在混篇數 = =