欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

[nice scroll] 可用于桌面、移动与触摸设备的jQuery滚动插件

效果图:

今天发现了一个滚动条插件,还不错,支持移动设备的:

NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于iOS设备。

代码详情和使用如下:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://shanmao.me/f/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>
  div{overflow: auto;height: 200px;}
  label{color:#A00;}
</style>
</head>
<body>
  <label>一般示例:</label>
  <div id="ex1">
    <p>你正在苦心研究一段绪乱如麻的程序(或其它问题)。你非常的清楚这段程序是干什么用的,你只是在想尽办法用另外一种更好的语言实现它。经过数小时跟它那错综复杂的逻辑纠缠不清,经过了无数次修改—编译—调试—恢复—重复循环后,你双手一甩,放弃,走人.</p>

      <p>可是突然的,当你做饭时,或看电影时,或边冲澡边想着午饭吃什么面,或只是正在专心干其它事情时——灵感来了。一个绝妙的方案从天而降,如此优雅,如此简单,你奇怪当时怎么就没想到这些。</p>

    <p>你迅速的在脑子里打了个草稿(或用Evernote、notepad什么的东西记/下来),此时,手头的其它事都不想做了,你迅速的打开 vim编辑器,直接把事情解决了。你就是这样做事情的。</p>

      <p>加密锁最终打开了——也许你听到了暗锁"咔嚓"一声响——搞定了。你后退一步,惊奇于它的美丽。你能感觉到这神秘的盒子发出的红光热印到你脸上。世界又恢复的次序。对于任何面对的问题,你都是专家——没有你解决不掉的难题,没有你过不去的河。</p>
      <p>你正在苦心研究一段绪乱如麻的程序(或其它问题)。你非常的清楚这段程序是干什么用的,你只是在想尽办法用另外一种更好的语言实现它。经过数小时跟它那错综复杂的逻辑纠缠不清,经过了无数次修改—编译—调试—恢复—重复循环后,你双手一甩,放弃,走人.</p>

            <p>可是突然的,当你做饭时,或看电影时,或边冲澡边想着午饭吃什么面,或只是正在专心干其它事情时——灵感来了。一个绝妙的方案从天而降,如此优雅,如此简单,你奇怪当时怎么就没想到这些。</p>

      <p>你迅速的在脑子里打了个草稿(或用Evernote、notepad什么的东西记下来),此时,手头的其它事都不想做了,你迅速的打开 vim编辑器,直接把事情解决了。你就是这样做事情的。</p>

      <p>加密锁最终打开了——也许你听到了暗锁"咔嚓"一声响——搞定了。你后退一步,惊奇于它的美丽。你能感觉到这神秘的盒子发出的红光热印到你脸上。世界又恢复的次序。对于任何面对的问题,你都是专家——没有你解决不掉的难题,没有你过不去的河。</p>
  </div>
  <label>自定义颜色:</label>
  <div id="ex2">
    <p>你正在苦心研究一段绪乱如麻的程序(或其它问题)。你非常的清楚这段程序是干什么用的,你只是在想尽办法用另外一种更好的语言实现它。经过数小时跟它那错综复杂的逻辑纠缠不清,经过了无数次修改—编译—调试—恢复—重复循环后,你双手一甩,放弃,走人.</p>

    <p>可是突然的,当你做饭时,或看电影时,或边冲澡边想着午饭吃什么面,或只是正在专心干其它事情时——灵感来了。一个绝妙的方案从天而降,如此优雅,如此简单,你奇怪当时怎么就没想到这些。</p>

    <p>你迅速的在脑子里打了个草稿(或用Evernote、notepad什么的东西记/下来),此时,手头的其它事都不想做了,你迅速的打开 vim编辑器,直接把事情解决了。你就是这样做事情的。</p>

    <p>加密锁最终打开了——也许你听到了暗锁"咔嚓"一声响——搞定了。你后退一步,惊奇于它的美丽。你能感觉到这神秘的盒子发出的红光热印到你脸上。世界又恢复的次序。对于任何面对的问题,你都是专家——没有你解决不掉的难题,没有你过不去的河。</p>
    <p>你正在苦心研究一段绪乱如麻的程序(或其它问题)。你非常的清楚这段程序是干什么用的,你只是在想尽办法用另外一种更好的语言实现它。经过数小时跟它那错综复杂的逻辑纠缠不清,经过了无数次修改—编译—调试—恢复—重复循环后,你双手一甩,放弃,走人.</p>

          <p>可是突然的,当你做饭时,或看电影时,或边冲澡边想着午饭吃什么面,或只是正在专心干其它事情时——灵感来了。一个绝妙的方案从天而降,如此优雅,如此简单,你奇怪当时怎么就没想到这些。</p>

    <p>你迅速的在脑子里打了个草稿(或用Evernote、notepad什么的东西记下来),此时,手头的其它事都不想做了,你迅速的打开 vim编辑器,直接把事情解决了。你就是这样做事情的。</p>

    <p>加密锁最终打开了——也许你听到了暗锁"咔嚓"一声响——搞定了。你后退一步,惊奇于它的美丽。你能感觉到这神秘的盒子发出的红光热印到你脸上。世界又恢复的次序。对于任何面对的问题,你都是专家——没有你解决不掉的难题,没有你过不去的河。</p>
  </div>

  <label>js代码</label>
  <p>$(document).ready(function(){
 $("#ex1").niceScroll();
  $("#ex2").niceScroll({cursorcolor:"#A00"});
});
</p>
  <label>官方演示:<a href="http://areaaperta.com/nicescroll/demo.html">http://areaaperta.com/nicescroll/demo.html</a></label>
<script type="text/javascript">
$(document).ready(function(){//调用插件执行
 $("#ex1").niceScroll();
  $("#ex2").niceScroll({cursorcolor:"#A00"});
});
</script>
</body>
</html>

更多API參數:

When you call “niceScroll” you can pass some parameters to custom visual aspects:

cursorcolor – change cursor color in hex, default is “#000000″
cursoropacitymin – change opacity very cursor is inactive (scrollabar “hidden” state), range from 1 to 0, default is 0 (hidden)
cursoropacitymax – change opacity very cursor is active (scrollabar “visible” state), range from 1 to 0, default is 1 (full opacity)
cursorwidth – cursor width in pixel, default is 5 (you can write “5px” too)
cursorborder – css definition for cursor border, default is “1px solid #fff”
cursorborderradius – border radius in pixel for cursor, default is “4px”
zindex – change z-index for scrollbar div, default value is 9999
scrollspeed – scrolling speed, default value is 60
mousescrollstep – scrolling speed with mouse wheel, default value is 40 (pixel)
touchbehavior – enable cursor-drag scrolling like touch devices in desktop computer, default is false
hwacceleration – use hardware accelerated scroll when supported, default is true
boxzoom – enable zoom for box content, default is false
dblclickzoom – (only when boxzoom=true) zoom activated when double click on box, default is true
gesturezoom – (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box, default is true
grabcursorenabled, display “grab” icon for div with touchbehavior = true, default is true
autohidemode, how hide the scrollbar works, true=default / “cursor” = only cursor hidden / false = do not hide
background, change css for rail background, default is “”
iframeautoresize, autoresize iframe on load event (default:true)
cursorminheight, set the minimum cursor height in pixel (default:20)
preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
railoffset, you can add offset top/left for rail position (default:false)
bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)

—————————————————————————–

在线演示

更多滚动条插件:http://www.oschina.net/question/89964_62203?from=20120729

更多

本文固定链接: http://shanmao.me/web/jquery/ke-yong-yu-zhuo-mian-yi-dong-yu-chu-mo-bei-de-jquery-gun-dong-cha-jian | 山猫的博客

该日志由 admin 于2012年07月31日发表在 jQuery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: [nice scroll] 可用于桌面、移动与触摸设备的jQuery滚动插件 | 山猫的博客
关键字: ,