怎么用jQuery+CSS實(shí)現(xiàn)垂直滾動(dòng)效果-創(chuàng)新互聯(lián)
本篇內(nèi)容主要講解“怎么用jQuery+CSS實(shí)現(xiàn)垂直滾動(dòng)效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用jQuery+CSS實(shí)現(xiàn)垂直滾動(dòng)效果”吧!
當(dāng)要在頁面上有限的區(qū)域內(nèi)展示很多內(nèi)容時(shí)，我們通常采用TAB切換、滾動(dòng)等方式來達(dá)到展示效果。本例中，我們利用jQuery和CSS可以使頁面內(nèi)容產(chǎn)生垂直滾動(dòng)的效果，還支持鼠標(biāo)滾輪驅(qū)動(dòng)。
XHTML
<p id="actions"><a class="next">></a><a class="prev"><</a></p>
<p class="scrollable vertical">
<p class="items">
<p>
任意html內(nèi)容
</p>
</p>
</p>
注意actions里放置的是左右導(dǎo)航方向按鈕，其外觀可以通過CSS來控制，滾動(dòng)的主體是.vertical，里面必須包含.items，每一個(gè).items作為一次展示的內(nèi)容，也是由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整體框架代碼，歡迎大家直接拷貝。注意一定要設(shè)置.vertical的寬度和高度，并且隱藏超出部分，同時(shí)注意導(dǎo)航按鈕我使用的是圖片背景，這樣看起來效果更好點(diǎn)，背景圖片我已打包好，歡迎大家下載。XHTML中“任意html內(nèi)容”的CSS，大家可以根據(jù)實(shí)際情況任意書寫，當(dāng)然你也可以參照本例DEMO中的樣式。
jQuery
$(function(){
$(".scrollable").scrollable({
vertical: true,
mousewheel: true
});
});
直接調(diào)用插件的scrollable()方法，有了jQuery后，生活就變得簡(jiǎn)單有趣了。滾動(dòng)插件提供了屬性配置，vertical: true即支持垂直滾動(dòng)；mousewheel: true支持鼠標(biāo)滾輪驅(qū)動(dòng)。
到此，相信大家對(duì)“怎么用jQuery+CSS實(shí)現(xiàn)垂直滾動(dòng)效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)頁標(biāo)題：怎么用jQuery+CSS實(shí)現(xiàn)垂直滾動(dòng)效果-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article36/iodsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、ChatGPT、外貿(mào)建站、用戶體驗(yàn)、外貿(mào)網(wǎng)站建設(shè)、Google
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 怎么在Linux系統(tǒng)中使用who和whoami命令獲取用戶信息-創(chuàng)新互聯(lián)
- 怎么在php中對(duì)數(shù)組進(jìn)行隨機(jī)排序-創(chuàng)新互聯(lián)
- 使用vue實(shí)現(xiàn)路由跳轉(zhuǎn)的方法有哪些-創(chuàng)新互聯(lián)
- php抽象類和接口知識(shí)點(diǎn)的示例分析-創(chuàng)新互聯(lián)
- 虛擬主機(jī)是否支持rewrite如何查看-創(chuàng)新互聯(lián)
- C++初始化列表詳解-創(chuàng)新互聯(lián)
- ovirt配置存儲(chǔ)域-創(chuàng)新互聯(lián)
