Javascript, 網頁設計

jQuery教學-ImageFlow相片特效套件

梅干2010/08/12
梅問題-jQuery教學-jQ版的ImageFlow相片特效
  昨天看到梅干嫂很專注的在上網,想說有什麼東西這麼好看,能梅干嫂這麼的靜敲敲,梅干便探頭過去看,原來是在看衣服難怪這麼專心,這時梅干不禁也被吸引了過去,但梅干被吸引的不是衣服,而是網站中衣服的呈現方式,還真是職業病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="https://www.minwt.com/"  alt="梅問題商品攝影-無敵鐵金鋼" title="無敵鐵金鋼" /> 
    <img src="img/MetalTableware.jpg"  longdesc="https://www.minwt.com/"  alt="梅問題商品攝影-雙人牌餐具" title="雙人牌餐具" /> 
    <img src="img/Schick.jpg"          longdesc="https://www.minwt.com/"  alt="梅問題商品攝影-舒適刮鬍刀" title="舒適刮鬍刀" /> 
    <img src="img/Perfume.jpg"         longdesc="https://www.minwt.com/"  alt="梅問題商品攝影-水滴造型香水" title="水滴造型香水" /> 
    <img src="img/MONTBLANC.jpg"       longdesc="https://www.minwt.com/"  alt="梅問題商品攝影-萬寶龍鋼筆" title="萬寶龍鋼筆" /> 
    <img src="img/watch.jpg"           longdesc="https://www.minwt.com/"  alt="梅問題商品攝影-陶瓷錶 " title="陶瓷錶 " />
    <img src="img/GlenTurner.jpg"      longdesc="https://www.minwt.com/"  alt="梅問題商品攝影-金黃威士忌 " title="金黃威士忌" />
    <img src="img/heineken.jpg"      longdesc="https://www.minwt.com/"    alt="梅問題商品攝影-清涼海尼根 " title="清涼海尼根" />  
    <img src="img/BRAUNBUFFEL.jpg"      longdesc="https://www.minwt.com/" alt="梅問題商品攝影-德國小金牛皮夾 " title="德國小金牛皮夾" /> 
    <img src="img/Dior.jpg"           longdesc="https://www.minwt.com/"   alt="梅問題商品攝影-Dior愛心造型耳環 " title="Dior愛心造型耳環" />
</div> 

[範例預覽] | [範例下載]
UAG軍規iPhone防摔殼