搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學－ImageFlow相片特效套件

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=“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>
[範例預覽] | [範例下載]


imageflow, imageflow教學, javascript教學, jquery外掛, jQuery教學, jqury套件, jquery,