第14款插件:Overscroll类似iPhone的卷页菜单插件

描述：类似iPhone的卷页菜单插件，即拖动页面进行滚动。

兼容浏览器：IE所有浏览器/Firefox/Google Chrome

官方链接： http://plugins.jquery.com/node/12032  
        另外一个链接，虽然不是官方的，但相当好用 http://www.azoffdesign.com/plugins/js/overscroll

JS下载： http://ijquery.360sites.cn/js/jquery.overscroll.js

预览： http://ijquery.360sites.cn/demo/overscroll

打包下载： http://ijquery.360sites.cn/demo/overscroll/overscroll.zip

参数说明： $('对象').overscroll;

图片展示：


类似的好的效果有，如图：


链接地址：http://www.azoffdesign.com/plugins/js/overscroll

JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.overscroll.js"></script>
   
3. <script>
   
4.         $(function () {
   
5.                 $('ul.overscroll li:even').css({
   
6.                         'backgroundColor': '#000',
   
7.                         'color': '#fff'
   
8.                 });
   
9.                 $('ul.overscroll').overscroll();
   
10.         });
    
11. </script>

复制代码

HTML代码：

1. <ul class="overscroll">
   
2.         <li>菜单A</li>
   
3.         <li>菜单B</li>
   
4.         <li>菜单C</li>
   
5.         <li>菜单D</li>
   
6.         <li>菜单E</li>
   
7.         <li>菜单F</li>
   
8.         <li>菜单G</li>
   
9.         <li>菜单H</li>
   
10.         <li>菜单I</li>
    
11.         <li>菜单J</li>
    
12.         <li>菜单K</li>
    
13.         <li>菜单L</li>
    
14. </ul>

复制代码

CSS代码：

1. ul {height: 300px;width: 300px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
   
2. li {height:3em;line-height: 3em;padding: 0 0 0 1em;border: 1px solid #ccc;}

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=14