图集1/1

正文 2660字数 118,205阅读

使用方法及使用参数
$("#id1").niceSroll("#id2",{ touchbehavior:true, //是否是触摸式滚动效果 cursorcolor:"#333", //滚动条的颜色值 cursoropacitymax:0.6, //滚动条的透明度值 cursorwidth:20, //滚动条的宽度值 background:#FF0000, //滚动条的背景色，默认是透明的 autohidemode:true, //滚动条是否是自动隐藏，默认值为 true ,表示是自动隐藏 boxzoom:true //是否显示放大镜标按钮，默认为false,表示不显示 });
Run code
Cut to clipboard


    <!-- start --> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/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> <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://lizhenqiu.com" height="100%" width="100%" frameborder="0" onload="$(this).height($(this).contents().height());"></iframe> </div> <!--end--> </div>
    Run code
    Cut to clipboard


      附件：http://lizhenqiu.com/upload/attach/tbs-YgdxK76JMj.nicescroll.js.txt