本篇内容主要讲解“怎么用jQuery+CSS实现垂直滚动效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery+CSS实现垂直滚动效果”吧!
当要在页面上有限的区域内展示很多内容时，我们通常采用TAB切换、滚动等方式来达到展示效果。本例中，我们利用jQuery和CSS可以使页面内容产生垂直滚动的效果，还支持鼠标滚轮驱动。
<p id="actions"><a class="next">></a><a class="prev"><</a></p>
<p class="scrollable vertical">
<p class="items">
<p>
任意html内容
</p>
</p>
</p>
注意actions里放置的是左右导航方向按钮，其外观可以通过CSS来控制，滚动的主体是.vertical，里面必须包含.items，每一个.items作为一次展示的内容，也是由CSS来控制大小。
.vertical{position:relative; width:650px; height:665px; margin:10px auto; border-top:1px
solid #ddd; overflow:hidden}
.items{position:absolute; width:650px; height:20000em;}
#actions{width:650px; margin:30px auto 10px;}
#actions a{display:block; width:24px; height:24px; background:url(images/arr.gif) no-repeat;
cursor:pointer; text-indent:-9999px}
#actions a.next{float:right; background-position:-24px 0}
.disabled{visibility:hidden}
这里给出CSS整体框架代码，欢迎大家直接拷贝。注意一定要设置.vertical的宽度和高度，并且隐藏超出部分，同时注意导航按钮我使用的是图片背景，这样看起来效果更好点，背景图片我已打包好，欢迎大家下载。XHTML中“任意html内容”的CSS，大家可以根据实际情况任意书写，当然你也可以参照本例DEMO中的样式。
$(function(){
$(".scrollable").scrollable({
vertical: true,
mousewheel: true
});
});
直接调用插件的scrollable()方法，有了jQuery后，生活就变得简单有趣了。滚动插件提供了属性配置，vertical: true即支持垂直滚动；mousewheel: true支持鼠标滚轮驱动。
到此，相信大家对“怎么用jQuery+CSS实现垂直滚动效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
