Home » jQuery 應用

[jQ]捲軸移動到底部觸發事件

[ 日期： | 瀏覽：37,531 | 迴響：4 ]
範例 1
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

當我們到某些網站申請服務時，常見的要我們看看同意書，然後勾選"我已同意xxx"的勾選框後才能進行下一步。雖然這樣的動作只是一種形式，不過也許有某種法律上的效益(只是也許)。

勾選框的方式是個簡單又實用的效果，但筆者此次要教各位的是用另一種方式來達到類似的功能。

第一步就是先準備個同意書：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body>
	<form method="post">
		<div id="terms">
			<h2>同意書</h2>
			<p>目前工作是網頁開發為主，因此針對了 HTML, JavaScript, CSS 等知識特別深入研究。若有任何問題，歡迎直接留言或是透過 Mail 討論。</p>
 
			<p>fontAvailable 是一個很有趣的外掛，它利用字型間的寬度差異性來判斷該字型是否有安裝。既然可以判斷是否有安裝就能針對沒安裝字型的來做設計囉。</p>
			<p>網頁設計人員都知道 HTML + CSS 是設計時不可或缺。但單純的靜態畫面不太能吸引瀏覽者的注意，所以得在搭配 JavaScript 來讓效果動起來。此次就用簡單的 jQuery 語法來讓原本單調的設計有不同的效果。</p>
 
			<p>如果你是看到預覽圖(感謝梅干熱情提供)而覺得裡面會有好康的話，建議可以按下 Alt + ← 來回到上一頁：如果你現在因為標題看不懂而感到莫名其妙的話，請不要覺得是自己的問題，因為筆者已經想不出範例名稱了XD！所以請忽略標題直接看下去。</p>
 
			<p>Img2DataURI 除了可以把圖片編碼成 DataURI 格式之外，也可以把編碼後的資料再轉回成圖片。如此一來就能偷偷的把別人的圖片還原囉(這不是這程式的主功能XD)！</p>
 
			<p class="red">當你按下送出申請鈕時，表示你看過且同意以上的內容！</p>
		</div>
		<input type="submit" name="submit" id="submit" value="送出申請" />
	</form>
</body>

這只是個很簡單的內容，接著利用 CSS 來稍微裝潢一下：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11

#terms {
	width: 450px;
	height: 200px;
	overflow: auto;	/* 讓它有捲軸 */
	border: 1px solid #ccc;
	margin-bottom: 10px;
	padding: 10px;
}
.red {
	color: red;
}

當 HTML 及 CSS 弄好後就能看到大概的樣子了：

不過現在的送出申請鈕是啟用的，所以筆者接下來會用 jQuery 來停用它，並設定當 #terms 的捲軸移動到底部時才啟用：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function(){
	// 先取得 #terms 及其各種高度
	// 判斷是否停用 $submit
	var $terms = $('#terms'),
		_height = $terms.height(), 
		_scrollHeight =  $terms.prop('scrollHeight'), 
		_maxScrollHeight = _scrollHeight - _height - 20;
		_least = 0, // 距離底部多少就可以, 0 表示得完全到底部
		$submit = $('#submit').attr('disabled', _maxScrollHeight > _least);
 
	// 當 #terms 中捲軸捲動時
	$('#terms').scroll(function(){
		var $this = $(this);
		// 如果高度已經達到指定的高度就啟用 $submit
		if(_maxScrollHeight - $this.scrollTop() <= _least){
			$submit.attr('disabled', false);
		}
	});
});

當一執行時就會把 $submit 設為停用的狀態，唯有把捲軸移動到指定的距離才會啟用它！

雖然這樣的設計也只是做做樣子而已，但也能為各位開發者多提供一項不同的效果選擇。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

4 筆針對 [jQ]捲軸移動到底部觸發事件 的迴響

發表迴響