jQuery+CSS实现垂直翻屏滚动效果

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

 

HTML

  1. <div id="actions"><a class="next">></a><a class="prev"><</a></div>  
  2. <div class="scrollable vertical">  
  3.     <div class="items">  
  4.        <div>  
  5.            任意html内容  
  6.        </div>  
  7.     </div>  
  8. </div>  

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

CSS

  1. .vertical{position:relativewidth:650pxheight:665pxmargin:10px autoborder-top:1px   
  2. solid #dddoverflow:hidden}  
  3. .items{position:absolutewidth:650pxheight:20000em;}  
  4. #actions{width:650pxmargin:30px auto 10px;}  
  5. #actions a{display:blockwidth:24pxheight:24pxbackground:url(images/arr.gif) no-repeat;  
  6.  cursor:pointertext-indent:-9999px}  
  7. #actions a.next{float:rightbackground-position:-24px 0}  
  8. .disabled{visibility:hidden}  

这里给出CSS整体框架代码,欢迎大家直接拷贝。注意一定要设置.vertical的宽度和高度,并且隐藏超出部分,同时注意导航按钮我使用的是图片背景,这样看起来效果更好点,背景图片我已打包好,欢迎大家下载。XHTML中“任意html内容”的CSS,大家可以根据实际情况任意书写,当然你也可以参照本例DEMO中的样式。

jQuery

  1. $(function(){  
  2.     $(".scrollable").scrollable({   
  3.          vertical: true,   
  4.          mousewheel: true   
  5.     });      
  6. });  

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

转载请注明:代码家园 » jQuery+CSS实现垂直翻屏滚动效果

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)