jQuery 取代原本的捲軸

由於網頁標準化
使得CSS中的捲軸設定無用(但IE還可用)
而要自由的變化捲軸變得不容易,但國外還是是有許多的高手利用JavaScript的基礎,再利用jQuery寫出許多富變化性的捲軸
由於這類的中文資訊太少,所以便整理一下
jscrollpane
這是我目前找到較簡單易於使用的
就如他所說的一樣把download裡所需的js和css下齊
然後再中填入

<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
 
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
 
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
 
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

代表要載入的js和css,要注意路徑,它預設

js是放在script中

css是放在style中

jquery.jscrollpane.css便是可以改捲軸的樣式

然後再<script type="text/javascript"></script>中放入

$(function()
{
 $('.scroll-pane').jScrollPane();
});

這代表要用的捲軸類型,不同的捲軸要放入不同的function

具體可以看Demo

要注意的是有捲軸的區塊要設class="scroll-pane"

並用css做設定

下面還有一些其他的捲軸可以試試

鐵人二號的設計手札

我是派10-jquery客製捲軸下載