jQuery教學－ImageFlow相片特效套件

梅干 2010/08/12 2 分鐘閱讀

　　昨天看到梅干嫂很專注的在上網，想說有什麼東西這麼好看，能梅干嫂這麼的靜敲敲，梅干便探頭過去看，原來是在看衣服難怪這麼專心，這時梅干不禁也被吸引了過去，但梅干被吸引的不是衣服，而是網站中衣服的呈現方式，還真是職業病XD~本以為那是Flash作的CoverFlow，結果恍然一看才知道，瞎米～竟然是jQuery作的，這時又勾起梅干的好奇心，趁著夜深人靜時，梅干獨自的研究這個特效到底是怎作的，最後才發現到，原來這是一個套件，只要載入就可直接使用囉！相當的Cool~

ImageFlow套件

套件名稱：ImageFlow
套件版本：1.2.1
官方網站：http://finnrudolph.de/ImageFlow/Introduction
官方下載：http://finnrudolph.de/ImageFlow/Download

放在<head>…..</head>之間：

<link href="imageflow/imageflow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="imageflow/jquery1.4.2.js"></script>
<script type="text/javascript" src="imageflow/imageflow.js"></script>
<script type="text/javascript" defer="defer">
domReady(function() {
var instance1 = new ImageFlow();
instance1.init({
ImageFlowID:'minwtImageFlow'              //imageflow的ID名稱
	, startID: 0                          //啟始ID
	, startAnimation: true                //一開始動態效果
	, imageFocusMax: 3                    //左右的顯示張數
	, imageFocusM: 1                      //圖片的顯示比例
	, xStep: 150                          //圖片x軸間距
	, opacity: true                       //透明效果
	, opacityArray: [10,5,3,1]            //透明效果設定0~10
	, buttons: true                       //上下張的按鈕圖示
	, imagesHeight: 0.57                  //圖片高度位置
	, preloadImagesText: '圖片載入中...'  //圖片載入的提示文字
	, reflectionP: 0.3                    //圖片高度縮放比例
	,onClick: function() {window.open(this.url, '_blank');} //連結另開視窗
});
});
</script>

參數設定說明：

aspectRatio:        1.964,          /* ImageFlow的高度 */
buttons:            false,          /* 上下張按鈕 */
captions:           true,           /* 標題顯示 */
imageCursor:        'default',      /* 滑鼠游標圖示 */
ImageFlowID:        'imageflow',    /* ImageFlow 的ID 名稱 */
imageFocusM:        1.0,            /* 圖片的顯示比例 */
imageFocusMax:      4,              /* 二邊照片出現的張數 */
imageScaling:       true,           /* 影像縮放切換 */
imagesHeight:       0.67,           /* 影像高度在Div的縮放比例 */
imagesM:            1.0,            /* 所有影像的顯示比例 */
onClick:            function() { document.location = this.url; },   /* 連結視窗設定 */
opacity:            false,          /* 透明效果 */
opacityArray:       [10,8,6,4,2],   /* 透明效果值從　0~10 */
preloadImages:      true,           /* 預載圖片Bar */
preloadImagesText:  'loading images',/* 預載圖片顯示文字 */
reflectionP:        0.5,            /* 圖片高度縮放比例 */
scrollbarP:         0.6,            /* 軸捲寬度比例 */
slider:             true,           /* 顯示捲軸 */
sliderCursor:       'e-resize',     /* 捲軸滑鼠圖示 */
sliderWidth:        14,             /* 捲軸寬度 */
startID:            1,              /* 起始顯示照片的ID */
startAnimation:     false,          /* 起始動畫效果 */
xStep:              150,            /* 圖片x軸間距 */
animationSpeed:     50,             /* 圖片轉換的時間 */
singleItemTag:      'IMG',          /* 設定項目的名稱　*/
slideshow:          false,          /* 幻燈片效果 */
slideshowInterval:  2000,           /* 幻燈片的時間 */
slideshowLeftToRight: true,         /* 幻燈片移動方向，true由左至右，false由右至左 */
cycle:              false           /* 滑鼠第三鍵切換影像 */

放在<body>…..</body>之間：
參數設定說明：

src：圖片路徑
longdesc：連結網址
alt：圖片顯示標題
title：滑鼠滑入出現提示文字

<div id="minwtImageFlow" class="imageflow">
    <img src="img/MazingerZ.jpg"       longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-無敵鐵金鋼" title="無敵鐵金鋼" />
    <img src="img/MetalTableware.jpg"  longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-雙人牌餐具" title="雙人牌餐具" />
    <img src="img/Schick.jpg"          longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-舒適刮鬍刀" title="舒適刮鬍刀" />
    <img src="img/Perfume.jpg"         longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-水滴造型香水" title="水滴造型香水" />
    <img src="img/MONTBLANC.jpg"       longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-萬寶龍鋼筆" title="萬寶龍鋼筆" />
    <img src="img/watch.jpg"           longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-陶瓷錶 " title="陶瓷錶 " />
    <img src="img/GlenTurner.jpg"      longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-金黃威士忌 " title="金黃威士忌" />
    <img src="img/heineken.jpg"      longdesc="http://www.minwt.com/"    alt="梅問題商品攝影-清涼海尼根 " title="清涼海尼根" />
    <img src="img/BRAUNBUFFEL.jpg"      longdesc="http://www.minwt.com/" alt="梅問題商品攝影-德國小金牛皮夾 " title="德國小金牛皮夾" />
    <img src="img/Dior.jpg"           longdesc="http://www.minwt.com/"   alt="梅問題商品攝影-Dior愛心造型耳環 " title="Dior愛心造型耳環" />
</div>

[範例預覽] | [範例下載]