描述:类似iPhone的卷页菜单插件,即拖动页面进行滚动。
兼容浏览器:IE所有浏览器/Firefox/Google Chrome
官方链接: http://plugins.jquery.com/node/12032
另外一个链接,虽然不是官方的,但相当好用 http://www.azoffdesign.com/plugins/js/overscroll
JS下载: http://www.ijquery.cn/js/jquery.overscroll.js
预览: http://www.ijquery.cn/study/demo/overscroll
打包下载: http://www.ijquery.cn/study/demo/overscroll/overscroll.zip
参数说明: $('对象').overscroll;
图片展示:
链接地址:http://www.azoffdesign.com/plugins/js/overscroll
JS引用代码:
[js]
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.overscroll.js"></script>
<script>
$(function () {
$('ul.overscroll li:even').css({
'backgroundColor': '#000',
'color': '#fff'
});
$('ul.overscroll').overscroll();
});
</script>
[/js]
HTML代码:
[html]
<ul>
<li>菜单A</li>
<li>菜单B</li>
<li>菜单C</li>
<li>菜单D</li>
<li>菜单E</li>
<li>菜单F</li>
<li>菜单G</li>
<li>菜单H</li>
<li>菜单I</li>
<li>菜单J</li>
<li>菜单K</li>
<li>菜单L</li>
</ul>
[/html]
CSS代码:
[css]
ul {height: 300px;width: 300px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
li {height:3em;line-height: 3em;padding: 0 0 0 1em;border: 1px solid #ccc;}
[/css]