Home » jQuery 外掛

[jQ]Image Scroller Plugin 0.1

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



Image Scroller Plugin 是作者仿 PUMA 網頁中的效果的。執行起來的動作有別於我們一般常見的放大鏡的功能。

套件名稱：Image Scroller Plugin
套件版本：0.1
作者網站：http://www.viget.com/inspire/jquery-image-scroller-plugin/
套件網址：N/A
發佈日期：2010-08-10
檔案大小：2.24 KB
檔案下載：jquery.imageScroller.js

參數說明：

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

preview(選填)
描述： 預覽圖片的選擇器
預設值： '.preview'
 
featureImg(選填)
描述： 大圖片的選擇器
預設值： '.feature-image'
 
indicatorText(選填)
描述： 透明控制圖層的說明指示文字
預設值： 'Drag Me'

方法說明：

檢視原始碼 JavaScript
1
2

// 幫指定的元素加入 Image Scroller 效果
$(selector).imageScroller(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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.imageScroller.js"></script>
<style type="text/css">
.image-scroller {
  height: 400px;	/* 自訂 */
  -moz-user-select: none;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  width: 1000px;	/* 大圖的寬 */
}
.image-scroller img {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}
.image-scroller .preview {
  border: 5px solid #fff;
  border-radius: 5px;
  bottom: 20px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.35);
  height: 133px;	/* 預覽圖的高 */
  left: 20px;
  -moz-border-radius: 5px;
  -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.35);
  position: absolute;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.35);
  width: 200px;	/* 預覽圖的寬 */
}
.image-scroller .preview .indicator {
  background: #000;
  cursor: move;
  display: block;
  left: 0;
  position: absolute;
  width: 200px;	/* 預覽圖的寬 */
}
.image-scroller .preview .indicator span {
  color: #fff;
  display: block;
  margin-top: -10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  width: 100%;
}
</style>
<script type="text/javascript">
	$(window).load(function(){
		// 把 .image-scroller 轉成 Image Scroller 效果
		$('.image-scroller').imageScroller({
			indicatorText: '試著拖拉我'
		});
	});
</script>
 
<body>
	<div class="image-scroller">
		<img class="feature-image" src="images/Schick05.jpg" alt="" />
		<div class="preview">
			<img src="images/Schick05prev.jpg" alt="" />
		</div>
    </div>
</body>
範例 1

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

9 筆針對 [jQ]Image Scroller Plugin 0.1 的迴響

  2. 版大您好，
    抱歉沒說清楚，我指的轉圈圈的效果是指，在小圖中操作，讓大圖的圖片做旋轉。就像是車子展示那樣，一下子看車子的前面，再轉一下，看到車子的後面，不曉得這樣說版大明不明白我要表達的意思。

  3. 版大您好，
    不好意思，再請問一下，「透明控制圖層」只能做上下拉動的動作嗎?
    無法做到從左往右拉嗎?想說如果可以將「透明控制圖層」區塊縮小，
    讓使用者可以上下左右拉到他想看的區塊，這樣就可以用在地圖上了。

  5. 360度旋轉圖片效果：http://twcf2.summerhost.info/1286_fd6g4fd6.php
    前提是，你必須要有該產品的各個角度圖片
    (滑鼠由右向左移動：產品順時針旋轉；滑鼠由左向右移動：產品逆時針旋轉)

發表迴響