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实现百度登录框的动态切换效果
Apr 21 jQuery
jquery仿微信聊天界面
May 06 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现的分页插件完整示例
May 26 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python实现的重启关机程序实例
2014/08/21 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
仓管员岗位责任制
2014/02/19 职场文书
图书室标语
2014/06/21 职场文书
社保转移委托书范本
2014/10/08 职场文书
党员倡议书
2015/01/19 职场文书
体育个人工作总结
2015/02/09 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js