閑來無事,練習js,參照網上的一些源碼寫了一個圖檔切換程式,剛來部落格園,不懂怎麼釋出js程式,懂的朋友可以留言告之。以下以圖檔解釋。
大緻功能如下:
1.圖檔切換效果有以下幾種:随機切換4格縱向百葉窗16格橫向百葉窗由裡至外逐漸放大中間向左右兩邊逐漸放大中間向上下兩邊逐漸放大由上至下落幕由左至右由左上至右下由右下至左上8格縱向百葉窗8格縱向百葉窗28格萬花筒24格萬花筒4格滑行左上至右下4格滑行左上至右下4格滑行落幕4格滑行延伸。
圖示為八格萬花筒效果:
2.支援的導航方式有以下幾種:
2.1:數字導航
2.2:圖檔内部導航:
2.3:圖檔底部導航
2.4: 左部圖檔導航
2.5: 右部圖檔導航
2.6: 無導航
使用方法:
使用方法力求簡單,隻需要在head标簽中添加
window.οnlοad=function(){
new imgswitch("imgcontainer",{type:15,width:874,height:211,pause:3000,speed:"fast",auto:true,navigate:"picture",pictureposition:"right"})
}
參數說明:
type:圖檔切換的方式,目前有0-17,
0: 随機切換
1: 4格縱向百葉窗
2: 16格橫向百葉窗
3: 由裡至外逐漸放大
4: 中間向左右兩邊逐漸放大
5: 中間向上下兩邊逐漸放大
6: 由上至下落幕
7: 由左至右
8: 由左上至右下
9: 由右下至左上
10: 8格縱向百葉窗
11: 8格縱向百葉窗2
12: 8格萬花筒
13: 24格萬花筒
14: 4格滑行左上至右下
15: 4格滑行左上至右下
16: 4格滑行落幕
17: 4格滑行延伸。
width:圖檔的寬度(這個有點小bug,回頭改正,修改長高時style.css裡面imgcontainer也請修改一下)
height:圖檔的高度
pause:圖檔停留的時間
speed:圖檔切換的時間,有三種方式,fast,normal,slow,也可以自定義時間,如:"200",機關是毫秒。預設為normal
auto:true或者false,是否自動播放
navigate:導航方式,目前有三種,"no"代表無導航,"numberic"代表數字導航,"picture"代表圖檔導航
navigateplace:導航所在地方。"inner"代表在内部,"outer"代表在外部
pictureposition:在navigate為picture的情況下,有三種方式:"bottom"導航圖檔在底部 "left"導航圖檔在左部 "right"導航圖檔在右部
原理說明
主要是利用div的position的left,top屬性來将圖檔分為幾部分:如
主要的屬性有: clipbackground-positionwidthheightbackground-image
大緻順序為:如果圖檔要弄成八部,則将長高除以八得到一個div的長高,如width: 235px; height: 177px;然後用bgimage和b-p來确定背景圖檔:background-position: 0px -177px;
background-image: url(file:///c:/documents%20and%20settings/administrator/%e6%a1%8c%e9%9d%a2/%e4%bb%a3%e7%a0%81/imgswitch/images/3.jpg);
最後用js來控制clip屬性,如 clip: rect(0px 235px 177px 0px);
目前測過的浏覽器支援:
ie(6,7,8,9)firfox chrome safari
測試事例完整源代碼
======================================================
在最後，我邀請大家參加新浪APP，就是新浪免費送大家的一個空間，支援PHP+MySql，免費二級域名，免費域名綁定 這個是我邀請的位址，您通過這個連結注冊即為我的好友，并獲贈雲豆500個，價值5元哦！短網址是http://t.cn/SXOiLh我建立的小站每天訪客已經達到2000+了，每天挂廣告賺50+元哦，呵呵，飯錢不愁了，\(^o^)/