本篇內(nèi)容主要講解“怎么用jQuery+CSS實現(xiàn)垂直滾動效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么用jQuery+CSS實現(xiàn)垂直滾動效果”吧!

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計,響應(yīng)式網(wǎng)站建設(shè),網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:18980820575

當(dāng)要在頁面上有限的區(qū)域內(nèi)展示很多內(nèi)容時，我們通常采用TAB切換、滾動等方式來達(dá)到展示效果。本例中，我們利用jQuery和CSS可以使頁面內(nèi)容產(chǎn)生垂直滾動的效果，還支持鼠標(biāo)滾輪驅(qū)動。

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來控制，滾動的主體是.vertical，里面必須包含.items，每一個.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的寬度和高度，并且隱藏超出部分，同時注意導(dǎo)航按鈕我使用的是圖片背景，這樣看起來效果更好點，背景圖片我已打包好，歡迎大家下載。XHTML中“任意html內(nèi)容”的CSS，大家可以根據(jù)實際情況任意書寫，當(dāng)然你也可以參照本例DEMO中的樣式。

jQuery

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

直接調(diào)用插件的scrollable()方法，有了jQuery后，生活就變得簡單有趣了。滾動插件提供了屬性配置，vertical: true即支持垂直滾動；mousewheel: true支持鼠標(biāo)滾輪驅(qū)動。

到此，相信大家對“怎么用jQuery+CSS實現(xiàn)垂直滾動效果”有了更深的了解，不妨來實際操作一番吧！這里是創(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實現(xiàn)垂直滾動效果-創(chuàng)新互聯(lián)
文章分享：http://chinadenli.net/article36/iodsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、ChatGPT、外貿(mào)建站、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)