Nicescroll的用法
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
<meta charset=utf-8 />
<title>NiceScroll演示</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#ex1,#ex2{overflow: auto; width:300px;height: 500px;}
</style>
</head>
<script type="text/javascript">
<!--
window.onresize = function(){
alert("11");
}
function aa(i){
if(i==1){
document.getElementById("ex1").style.display="block";
document.getElementById("ex2").style.display="none";
$("#ex1").getNiceScroll().show();//顯示滾動條
$("#ex1").getNiceScroll().resize();//檢測滾動條是否重置大小（當窗口改變大小時）
$("#ex1").niceScroll();//初始化
$("#ex2").getNiceScroll().hide();//隱藏滾動條
}else{
document.getElementById("ex1").style.display="none";
document.getElementById("ex2").style.display="block";
$("#ex2").getNiceScroll().show();
$("#ex2").getNiceScroll().resize();
$("#ex1").getNiceScroll().hide();
$("#ex2").niceScroll({cursorcolor:"#A00"});
}
}
//-->
</script>
<body>
<input type="button" οnclick="aa(1);" value="but1" name="but1" /><input type="button" οnclick="aa(2);" value="but2" name="but2" />
<label>一般示例：</label>
<div id="ex1" style="display:block;">
<div id="ddd">
<p>123你正在苦心研究一段緒亂如麻的程序(或其它問題)。你非常的清楚這段程序是幹什麼用的，你只是在想盡辦法用另外一種更好的語言實現它。經過數小時跟它那錯綜複雜的邏輯糾纏不清，經過了無數次修改—編譯—調試—恢復—重複循環後，你雙手一甩，放棄，走人.</p>
<p>可是突然的，當你做飯時，或看電影時，或邊沖澡邊想着午飯喫什麼面，或只是正在專心幹其它事情時——靈感來了。一個絕妙的方案從天而降，如此優雅，如此簡單，你奇怪當時怎麼就沒想到這些。</p>
<p>你迅速的在腦子裏打了個草稿(或用Evernote、notepad什麼的東西記/下來)，此時，手頭的其它事都不想做了，你迅速的打開 vim編輯器，直接把事情解決了。你就是這樣做事情的。</p>
<p>加密鎖最終打開了——也許你聽到了暗鎖“咔嚓”一聲響——搞定了。你後退一步，驚奇於它的美麗。你能感覺到這神祕的盒子發出的紅光熱印到你臉上。世界又恢復的次序。對於任何面對的問題，你都是專家——沒有你解決不掉的難題，沒有你過不去的河。</p>
<p>你正在苦心研究一段緒亂如麻的程序(或其它問題)。你非常的清楚這段程序是幹什麼用的，你只是在想盡辦法用另外一種更好的語言實現它。經過數小時跟它那錯綜複雜的邏輯糾纏不清，經過了無數次修改—編譯—調試—恢復—重複循環後，你雙手一甩，放棄，走人.</p>
<p>可是突然的，當你做飯時，或看電影時，或邊沖澡邊想着午飯喫什麼面，或只是正在專心幹其它事情時——靈感來了。一個絕妙的方案從天而降，如此優雅，如此簡單，你奇怪當時怎麼就沒想到這些。</p>
<p>你迅速的在腦子裏打了個草稿(或用Evernote、notepad什麼的東西記下來)，此時，手頭的其它事都不想做了，你迅速的打開 vim編輯器，直接把事情解決了。你就是這樣做事情的。</p>
<p>加密鎖最終打開了——也許你聽到了暗鎖“咔嚓”一聲響——搞定了。你後退一步，驚奇於它的美麗。你能感覺到這神祕的盒子發出的紅光熱印到你臉上。世界又恢復的次序。對於任何面對的問題，你都是專家——沒有你解決不掉的難題，沒有你過不去的河。</p>
</div>
</div>
<label>自定義顏色：</label>
<div id="ex2" style="display:none;">
<p>456你正在苦心研究一段緒亂如麻的程序(或其它問題)。你非常的清楚這段程序是幹什麼用的，你只是在想盡辦法用另外一種更好的語言實現它。經過數小時跟它那錯綜複雜的邏輯糾纏不清，經過了無數次修改—編譯—調試—恢復—重複循環後，你雙手一甩，放棄，走人.</p>
<p>可是突然的，當你做飯時，或看電影時，或邊沖澡邊想着午飯喫什麼面，或只是正在專心幹其它事情時——靈感來了。一個絕妙的方案從天而降，如此優雅，如此簡單，你奇怪當時怎麼就沒想到這些。</p>
<p>你迅速的在腦子裏打了個草稿(或用Evernote、notepad什麼的東西記/下來)，此時，手頭的其它事都不想做了，你迅速的打開 vim編輯器，直接把事情解決了。你就是這樣做事情的。</p>
<p>加密鎖最終打開了——也許你聽到了暗鎖“咔嚓”一聲響——搞定了。你後退一步，驚奇於它的美麗。你能感覺到這神祕的盒子發出的紅光熱印到你臉上。世界又恢復的次序。對於任何面對的問題，你都是專家——沒有你解決不掉的難題，沒有你過不去的河。</p>
<p>你正在苦心研究一段緒亂如麻的程序(或其它問題)。你非常的清楚這段程序是幹什麼用的，你只是在想盡辦法用另外一種更好的語言實現它。經過數小時跟它那錯綜複雜的邏輯糾纏不清，經過了無數次修改—編譯—調試—恢復—重複循環後，你雙手一甩，放棄，走人.</p>
<p>可是突然的，當你做飯時，或看電影時，或邊沖澡邊想着午飯喫什麼面，或只是正在專心幹其它事情時——靈感來了。一個絕妙的方案從天而降，如此優雅，如此簡單，你奇怪當時怎麼就沒想到這些。</p>
<p>你迅速的在腦子裏打了個草稿(或用Evernote、notepad什麼的東西記下來)，此時，手頭的其它事都不想做了，你迅速的打開 vim編輯器，直接把事情解決了。你就是這樣做事情的。</p>
<p>加密鎖最終打開了——也許你聽到了暗鎖“咔嚓”一聲響——搞定了。你後退一步，驚奇於它的美麗。你能感覺到這神祕的盒子發出的紅光熱印到你臉上。世界又恢復的次序。對於任何面對的問題，你都是專家——沒有你解決不掉的難題，沒有你過不去的河。</p>
</div>
<label>官方演示：<a href="http://areaaperta.com/nicescroll/demo.html">http://areaaperta.com/nicescroll/demo.html</a></label>
</body>
</html><script>
$("#ex1").niceScroll({cursorcolor:"#222222",cursoropacitymin: "0",cursoropacitymax: "1",cursorwidth: "5px",cursorborder: "1px solid #fff",cursorborderradius: "5px", autohidemode: "scroll"});
$("#ex2").niceScroll({cursorcolor:"#A00"});
</script>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章