开发学院网页设计 JavaScript jquery滚动条插件nanoscroller的应用阅读

jquery滚动条插件nanoscroller的应用

　2012-11-20 15:14:25　来源：WEB开发网　　　

核心提示： 1.引入样式 nanoscroller.css2.两个js文件，一个jquery库，jquery滚动条插件nanoscroller的应用，一个jquery.nanoscroller.js3.可以自己设置的样式.nano { background: #bba; width: 300px; height: 300px;

1.引入样式 nanoscroller.css

2.两个js文件，一个jquery库，一个jquery.nanoscroller.js

3.可以自己设置的样式

.nano { background: #bba; width: 300px; height: 300px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider {background: #111;}//兼容IE8

4.页面加载的时候
$(function(){
$(".nano").nanoScroller();
});

5.body里的

<body>
<div id="about" class="nano">
<div class="content">
<p>你正在苦心研究一段绪乱如麻的程序(或其它问题)。你非常的清楚这段程序是干什么用的，你只是在想尽办法用另外一种更好的语言实现它。经过数小时跟它那错综复杂的逻辑纠缠不清，经过了无数次修改—编译—调试—恢复—重复循环后，你双手一甩，放弃，走人.</p>

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

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

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

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

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

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