最新消息:

第14款插件:jquery.overscroll.js类似iPhone的卷页菜单插件

菜单插件 杨红伟 3431浏览 0评论

描述:类似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/demo/overscroll
打包下载: http://www.ijquery.cn/demo/overscroll/overscroll.zip
参数说明:
$(‘对象’).overscroll;
图片展示:

77
类似的好的效果有,如图:

88

链接地址: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]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址