2013年1月20日 星期日

jQuery教學-ImageFlow相片特效套件

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

放在<head>.....</head>之間:

 
 


參數設定說明:
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:滑鼠滑入出現提示文字
攝影-無敵鐵金鋼 攝影-雙人牌餐具 攝影-舒適刮鬍刀 攝影-水滴造型香水 攝影-萬寶龍鋼筆 攝影-陶瓷錶 攝影-金黃威士忌 攝影-清涼海尼根 攝影-德國小金牛皮夾 攝影-Dior愛心造型耳環