<!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">
<head>
<title>第92款插件：jquery.nicescroll.js可全屏可改滾動條顏色的滾動條插件-推薦</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.ijquery.cn/css/css.css" />
<!-- start -->
<script src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script src="nicescroll/jquery.nicescroll.js"></script>
<script type="text/javascript">
$(function() {
//圖片區域顯示滾動效果
$("#box1").niceScroll("#box1 div", {
touchbehavior: true,
cursorcolor: "#333",
cursoropacitymax: 0.6,
autohidemode: false,
boxzoom: false
});
//div區域顯示滾動效果
$("#box2").niceScroll("#content", {
cursorcolor: "#666",
autohidemode: false,
boxzoom: true
});
//iframe區域顯示滾動效果
$("#box3").niceScroll("iframe", {
cursorcolor: "#ccc",
autohidemode: false,
boxzoom: true
});
});
</script>
<!-- end -->
<style type="text/css">
.bs{padding:5px;height:120px;margin:0 auto;border:1px solid #555;overflow:auto;width:380px}
</style>
</head>
<body>
<div id="header">
<h1>第92款插件：jquery.nicescroll.js可全屏可改滾動條顏色的滾動條插件-推薦</h1>
</div>
<div id="container">
<!--start-->
<p>DIV裏是圖片</p>
<div id="box1" class="bs">
<div class="scrimg">
<img src="images/pic10.jpg" />
<img src="images/pic10.jpg" />
<img src="images/pic10.jpg" />
<img src="images/pic10.jpg" />
<img src="images/pic10.jpg" />
</div>
</div>
<p>DIV裏是內容</p>
<div id="box2" class="bs">
<div id="content">
<h3>這是一個div區域</h3>
<p class="p">內容區域</p>
</div>
</div>
<p>DIV裏是框架</p>
<div id="box3" class="bs">
<!--iframe 自適應高度 -->
<iframe src="http://www.baidu.com" height="100%" width="100%" frameborder="0" onload="$(this).height($(this).contents().height());"></iframe>
</div>
<!--end-->
</div>
</body>
</html> js自定義滾動條
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章