jQuery+CSS实现垂直滚动效果

原创文章 作者:月光光 2011年08月23日 14:04helloweba.com 标签:jQuery  CSS3  滑动 

当要在页面上有限的区域内展示很多内容时,我们通常采用TAB切换、滚动等方式来达到展示效果。本例中,我们利用jQuery和CSS可以使页面内容产生垂直滚动的效果,还支持鼠标滚轮驱动。

jQuery+CSS实现垂直滚动效果

XHTML

<div id="actions"><a class="next">></a><a class="prev"><</a></div>
<div class="scrollable vertical">
    <div class="items">
       <div>
           任意html内容
       </div>
    </div>
</div>

注意actions里放置的是左右导航方向按钮,其外观可以通过CSS来控制,滚动的主体是.vertical,里面必须包含.items,每一个.items作为一次展示的内容,也是由CSS来控制大小。

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中的样式。

jQuery

$(function(){
	$(".scrollable").scrollable({ 
         vertical: true, 
         mousewheel: true 
    });	
});

直接调用插件的scrollable()方法,有了jQuery后,生活就变得简单有趣了。滚动插件提供了属性配置,vertical: true即支持垂直滚动;mousewheel: true支持鼠标滚轮驱动。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/142.html

6条评论

  • jquery库都是老外写的呢。楼下的楼下有本事你别用啊。。 怎么说人家也是付出劳动翻译过来的

  • 是吖...却是是老外的东西,可是人家会翻译,会运用,不好吗??楼下那位,如果你厉害的话,也用下老外的东西,做成实例试试...

  • 人家老外写的东西,你改了下,你就表上版权! 你还真好意思!

  • 的确不错

  • 真是好用啊,学习了!

  • 很好