怎么用jQuery+CSS实现垂直滚动效果-创新互联

本篇内容主要讲解“怎么用jQuery+CSS实现垂直滚动效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用jQuery+CSS实现垂直滚动效果”吧!

创新互联成都企业网站建设服务,提供成都网站设计、网站建设网站开发,网站定制,建网站,网站搭建,网站设计,响应式网站建设,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:18980820575

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

XHTML

<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来控制大小。

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支持鼠标滚轮驱动。

到此,相信大家对“怎么用jQuery+CSS实现垂直滚动效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

网页标题:怎么用jQuery+CSS实现垂直滚动效果-创新互联
文章分享:https://www.cdcxhl.com/article36/iodsg.html

成都网站建设公司_创新互联,为您提供网站内链ChatGPT外贸建站用户体验外贸网站建设Google

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

绵阳服务器托管