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愛心造型耳環
於
標籤：

jQuery教學－jqeury.height滑動展開iframe高度

其實讓iframe自動長高已不是什麼新技術

放在<head>.....</head>之間：
放在<body>.....</body>之間： 
main.html

news.html
範例http://img.minwt.com/file/sampleView/jQuery/AutoiFrameHeight/iframe.htm
範例下載 http://img.minwt.com/file/sampleView/jQuery/AutoiFrameHeight/AutoiFrameHeight.rar
於
標籤：

jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

Supersized全螢背景外掛：
適用瀏覽器：IE7.0+、Chrome、Firefox、Safari、Opera
官方網站：http://www.elriks.com/prototypes/index.html
官方展示：http://www.elriks.com/prototypes/lib/scripts/prototypes/_galeries/Supersized/default.htm

Supersized 參數設定：
startwidth: 640 //照片起始長度
startheight: 480 //照片起始寬度
vertical_center: 1 //垂直居中 1居中,0關閉
slideshow: 1 //自動輪播 1開,0關
navigation: 1 //播放控制鈕 1開,0關
transition: 1 //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left //轉場效果
pause_hover: 1 //滑入時停止輪播 1開,0關
slide_counter: 1 //顯示圖片筆數 1開,0關
slide_captions: 1 //圖片名稱
slide_interval: 3000 //轉場時間

Supersized 增加圖片：
加在<div id="supersize">~</div>之間即可，增加圖片img標籤中，可用title來設定圖片名稱。
於
標籤：

jQuery外掛－jQuery Masonry瀑布流版型套件

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



內容1



內容2



內容3



內容4



內容5



內容6
CSS樣式設定，放在<head>.....</head>之間：
啟用Jquery Masonry元件，放在<script>.....</script>之下： 
$(function(){
 $('#_container').imagesLoaded(function () {
        $('#_container').masonry({        
            itemSelector: '.content_box',
            columnWidth: 364,
            animate:true
        });
 });
});


Jquery Masonry參數說明：
imagesLoaded：用來防止計算圖片寬度和高度的錯誤
itemSelector：要套用效果的DIV
columnWidth：欄位寬度，當圖片載入失敗，或是還沒載入時，預設的寬高會以這為主
animate：動態效果

jQuery Masonry套件：
外掛元件：jQuery Masonry
外掛版本：v2.1
官方網站：http://masonry.desandro.com/index.html
於
標籤：

2013年1月14日 星期一

MySQL、MS SQL 與 Oracle 取得自動編號欄位新增後的值

資料表格式
A int Unchecked (INDEX)
B nchar(10) Checked

MSSQL 
INSERT INTO [TableName] (欄位1,欄位2) values(值1,值2) '新增資料
SELECT scope_identity() '傳回剛新增的自動編號資

INSERT INTO BB (B) VALUES ('AA')
SELECT @@identity

INSERT INTO BB (B) VALUES ('AA')
SELECT Scope_identity()
兩者之間的差異在於 SCOPE_IDENTITY 和 @@IDENTITY 將傳回現行工作階段中任何資料表所產生的最後一個識別值，不過，SCOPE_IDENTITY 只會傳回現行範圍內的值，@@IDENTITY 並未限制特定範圍。 
-- 建立資料表
CREATE TABLE [member]
(
[uid] [int] IDENTITY(1,1) NOT NULL,
[name] [nvarchar](50) NULL
) ON [PRIMARY]

-- 新增一筆資料
INSERT INTO [member] VALUES ( 'Ian' )

-- 取得自動編號的值
SELECT SCOPE_IDENTITY()


MySQL 
-- 建立資料表
CREATE TABLE member
(
uid INT NOT NULL AUTO_INCREMENT,
name VARCHAR( 50 ) NOT NULL,
PRIMARY KEY ( uid )
)

-- 新增一筆資料  
INSERT INTO member VALUES ( NULL , 'Ian' )

-- 取得自動編號的值
SELECT LAST_INSERT_ID()


Oracle 
-- 建立資料表
CREATE TABLE "member"   
(  
"uid" NUMBER,   
"name" NVARCHAR2(50)  
);  
  
-- 建立 Sequence  
CREATE SEQUENCE "seq_member"  
MINVALUE 1  
MAXVALUE 999999999  
INCREMENT BY 1  
START WITH 1 

-- 新增一筆資料並利用 Sequence 自動產生編號  
INSERT INTO member VALUES(seq_member.NEXTVAL,'Ian') 

-- 取得自動編號的值  
SELECT seq_member.CURRVAL FROM DUAL
於
標籤：
訂閱： 文章 (Atom)