首頁 > 開發者 > JavaScript

一個JQuery寫的點擊上下滾動的小例子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

功能需求：
1、捲動方塊內顯示10條記錄；
2、有向上和向下滾動按鈕，每次點擊按鈕向上或向下滾動記錄條數，不自動滾動；
3、記錄條數不迴圈滾動，滾動到起點或終點則停止滾動。
下面介紹一個簡單實現方法：
1、外層容器（div） overflow: hidden，內層列表（ul）
2、按鈕點擊事件觸發一個修改列表的函數
3、應用animate實現動畫效果
具體不再囉嗦，直接上代碼
CSS設定
複製代碼 代碼如下:
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv
{
width: 300px;
height: 250px;
min-height: 25px;
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
#scrollDiv li
{
height: 25px;
padding-left: 10px;
}
</style>

JQuery 代碼
複製代碼 代碼如下:
<script type="text/javascript">
(function ($) {
$.fn.extend({
Scroll: function (opt, callback) {
if (!opt) var opt = {};
var _btnUp = $("#" + opt.up); //Shawphy:向上按鈕
var _btnDown = $("#" + opt.down); //Shawphy:向下按鈕
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(); //擷取行高
var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10); //每次滾動的行數，預設為一屏，即父容器高度
var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //捲動速度，數值越大，速度越慢（毫秒）
var m = line; //用於計算的變數
var count = _this.find("li").length; //總共的<li>元素的個數
var upHeight = line * lineH;
function scrollUp() {
if (!_this.is(":animated")) { //判斷元素是否正處於動畫，如果不處於動畫狀態，則追加動畫。
if (m < count) { //判斷 m 是否小於總的個數
m += line;
_this.animate({ marginTop: "-=" + upHeight + "px" }, speed);
}
}
}
function scrollDown() {
if (!_this.is(":animated")) {
if (m > line) { //判斷m 是否大於一屏個數
m -= line;
_this.animate({ marginTop: "+=" + upHeight + "px" }, speed);
}
}
}
_btnUp.bind("click", scrollUp);
_btnDown.bind("click", scrollDown);
}
});
})(jQuery);
$(function () {
$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });
});
</script>

可以設定$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });對滾動按鈕，滾動行數，捲動速度進行設定。
Html Body 內容
複製代碼 代碼如下:
<body>
<p style="font-family: 微軟雅黑; font-weight: bold;">
資訊滾動欄DEMO：</p>
<div id="scrollDiv">
<ul>
<li>這是滾動資訊的第1行</li>
<li>這是滾動資訊的第2行</li>
<li>這是滾動資訊的第3行</li>
<li>這是滾動資訊的第4行</li>
<li>這是滾動資訊的第5行</li>
<li>這是滾動資訊的第6行</li>
<li>這是滾動資訊的第7行</li>
<li>這是滾動資訊的第8行</li>
<li>這是滾動資訊的第9行</li>
<li>這是滾動資訊的第10行</li>
<li>這是滾動資訊的第11行</li>
<li>這是滾動資訊的第12行</li>
<li>這是滾動資訊的第13行</li>
<li>這是滾動資訊的第14行</li>
<li>這是滾動資訊的第15行</li>
<li>這是滾動資訊的第16行</li>
<li>這是滾動資訊的第17行</li>
<li>這是滾動資訊的第18行</li>
<li>這是滾動資訊的第19行</li>
<li>這是滾動資訊的第20行</li>
<li>這是滾動資訊的第21行</li>
<li>這是滾動資訊的第22行</li>
<li>這是滾動資訊的第23行</li>
<li>這是滾動資訊的第24行</li>
<li>這是滾動資訊的第25行</li>
<li>這是滾動資訊的第26行</li>
<li>這是滾動資訊的第27行</li>
<li>這是滾動資訊的第28行</li>
<li>這是滾動資訊的第29行</li>
<li>這是滾動資訊的第30行</li>
<li>這是滾動資訊的第31行</li>
<li>這是滾動資訊的第32行</li>
</ul>
</div>
<button id="btn1">
上滾</button>
<button id="btn2">
下滾</button>
</body>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More