溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用jQuery+CSS實現垂直滾動效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用jQuery+CSS實現垂直滾動效果”吧!
當要在頁面上有限的區域內展示很多內容時，我們通常采用TAB切換、滾動等方式來達到展示效果。本例中，我們利用jQuery和CSS可以使頁面內容產生垂直滾動的效果，還支持鼠標滾輪驅動。
<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來控制大小。
.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中的樣式。
$(function(){
$(".scrollable").scrollable({
vertical: true,
mousewheel: true
});
});
直接調用插件的scrollable()方法，有了jQuery后，生活就變得簡單有趣了。滾動插件提供了屬性配置，vertical: true即支持垂直滾動；mousewheel: true支持鼠標滾輪驅動。
到此，相信大家對“怎么用jQuery+CSS實現垂直滾動效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
