Home » jQuery 外掛

[jQ]hoverIntent r5

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



jQuery 本身提供了很方便的 .hover() 事件來讓我們設計出滑鼠的移入/出動作；但有時是希望當使用者移入/出經過多久時間後才執行指定的動作，此時就得自己在加入計時器來控制了。
而 hoverIntent 則是幫我們擴充了原有的 .hover() 功能，讓設計者能用參數的方式來設定移入/出的延遲時間。

套件名稱：hoverIntent
套件版本：r5
作者網站：http://cherne.net/brian/resources/jquery.hoverIntent.html
套件網址：http://plugins.jquery.com/project/hoverIntent
發佈日期：2007-03-27
檔案大小：4.41 KB
檔案下載：jquery.hoverIntent.js

參數說明：

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

over(選填)
描述： 當滑鼠移入後要執行的動作
預設值： 無
 
timeout(選填)
描述： 當滑鼠移出時，若在 timeout 時間內又移入的話，則不會觸發移出的動作。
預設值： 0
 
out(選填)
描述： 當滑鼠移出後要執行的動作
預設值： 無
 
sensitivity(選填)
描述： 滑鼠移動距離的敏感度；最小要設為 1
預設值： 7
 
interval(選填)
描述： 當滑鼠移入時，若在 interval 時間內又移出的話，則不會觸發移入的動作。
預設值： 100

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 幫指定的元素加入 hoverIntent 事件
$(selector).hoverIntent(f, g);
 
// 幫指定的元素加入 hoverIntent 事件
$(selector).hoverIntent(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<style type="text/css">
	div {
		border: 1px solid black;
		width: 100px;
		height: 30px;
		margin: 10px 0;
		background-color: #fcc;
	}
	.div2 {
		background-color: #cf0;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 讓 .div1, .div2 加上延遲效果的 hoverIntent
		$('.div1, .div2').hoverIntent({
			interval: 500,
			over: function(){
				$(this).animate({
					width: 300
				});
			},
			timeout: 500,
			out: function(){
				$(this).animate({
					width: 100
				});
			}
		});
	});
</script>
 
<body>
	<div class="div1"></div>
 
	<div class="div2"></div>
</body>
範例 1

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

發表迴響