jQuery滚动条美化插件nicescroll简单用法示例


Posted in jQuery onApril 18, 2018

本文实例讲述了jQuery滚动条美化插件nicescroll简单用法。分享给大家供大家参考,具体如下:

你是否遇到过这种情况:想要在网页中嵌入div块并且局部滚动,但滚动条太难看啦!!!

jQuery滚动条美化插件nicescroll简单用法示例

使用jquery.nicescroll来美化滚动条吧(so easy!!):

首先:下载jquery.nicescroll.js。百度一下哦!!!(或者像本例所示直接使用CDN地址)

然后引入jquery.nicescroll.js,并且使用:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3water.com jquery.nicescroll插件</title>
    <style>
      .div{
        width: 300px;
        height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.js" ></script>
    <script>
      $(function(){
         $(".div").niceScroll({cursorcolor:"#cccccc"});
      });
    </script>
  </head>
  <body>
    <div class="div">
      去西藏应该避开雨季,大家都知道西藏属于高原地区,是冻土、流沙、泥石流多发的地段,雨季山体滑坡、落石严重,湖水混浊,行路与景色都不怎么样。所以,最好在5、6、9、10月去比较好。我国西藏地区海拔都在3000米以上,所以去西藏旅游最好带上氧气和预防高原反应的药品,对车辆要认真见车,在西藏境内加油站非常少,最好在200公里左右加一次油。
去内蒙自驾游一般选择7、8月间,可以看看中国最大的草原——呼伦贝尔大草原(海拉尔),锡林格勒、阿尔山、克什克腾、地热、四子王旗、二连浩特口岸、满洲里口岸等。
去河南、河北、山东、四川、青海、陕西、宁夏、甘肃(包括嘉峪关、莫高窟)等地玩儿,一般全年均可,选择4月到11月期间去,不会太冷,最好6、7月份去,还可以避暑。
去新疆,8、9、10月比较好,正是新疆水果最多的时候。
去广东、广西、海南、云南、上海、苏州、杭州、南京、无锡、宁波等地,春天去比较好,可以避开炎热的夏天。
去东北,如北戴河、山海关、辽宁等以夏季为宜。吉林、长白山、雪乡、哈尔滨、漠河、北极村、小兴安岭在冬季1月—2月之间最好,可以观看雪景、冰雕,也是滑雪的好时期。
    </div>
  </body>
</html>

运行效果:

jQuery滚动条美化插件nicescroll简单用法示例

大家学会了吗,很简单哦!!!

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 #jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 #jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
You might like
十天学会php之第七天
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
vue实现评价星星功能
2020/06/30 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python 图片验证码代码
2008/12/07 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python实现日志按天分割
2019/07/22 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
python中spy++的使用超详细教程
2021/01/29 Python
如何用PHP实现邮件发送
2012/12/26 面试题
一套SQL笔试题
2016/08/14 面试题
值传递还是引用传递
2015/02/08 面试题
办公室前台的岗位职责
2013/12/20 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
股东授权委托书范本
2014/09/13 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
详解Vue3使用axios的配置教程
2022/04/29 Vue.js