js圖片查看器,層方式顯示上一張下一張帶退出

　　這是利用javascript實現圖片查看器,層方式顯示上一張下一張帶退出的代碼，注意代碼里的函數$(),addEvent(),removeEvent()并未封裝到圖片查看器中，個人認為這三個函數會在網頁中多次應用，為避免重復代碼，故沒有封裝。示例中使用了淡入淡出效果(僅FF，IE中測試時太耗資源，故放棄)，和滑動效果，還有拖動。其中拖動柄在右側，初始為透明，當鼠標放在圖片上時會滑出圖片信息。

　　使用方法：pictureBox.init(boxId,coverId,range,picwidth,picheight);

　　boxId:圖片查看器的主框體id，可據此設計框體樣式。自設

　　coverId:覆蓋層id，自設

　　rang:某個范圍內的圖片可以通過圖片查看器查看高像素圖片，rang為節點對象

　　pictwidth:要顯示圖片的寬度。自設

　　picheight:要顯示圖片的高度，自設

　　!! 注意：方法的調用必須在文檔底部，或window.onload中，但建議在文檔底部調用，這樣可避免在圖片未加載完時圖片查看器不看用

　　實例：

　　本文演示：http://www.vxbq.cn/a/demo/2010/js_pic_box.html

　　寫的圖片查看器（無上一張下一張效果）：http://www.vxbq.cn/a/view/17659.html

　　所有方法說明：

　　1. init():初始化圖片查看器，包括創建節點，和添加事件

　　2. createBox():創建圖片查看器所需所有節點

　　3.addEvents():為節點添加所需所有事件

　　4. drag(elem):使可拖動 node elem: 拖動柄

　　6. fadeout(elem,start,end,speed):淡出 documentElement elem:淡出元素,int start 起始透明度，int end 結束透明度，幀 speed：速度，

　　6. fadein(elem,start,end,speed):淡出 documentElement elem:淡出元素,int start 起始透明度，int end 結束透明度，幀 speed：速度，

　　7.follow(source,follower,handlerBeforeFl): documentElement source:跟隨域,documentElement follower:跟隨元素，function handlerBeforeFl :跟隨效果前執行，可為空

　　8.viewPic(container,src,handler): documentElement container:圖片的容器，src：圖片源地址，handler:修改源地址的函數，可為空

　　9.hide():隱藏圖片查看器

　　10.start():顯示圖片查看器

　　11._imgHandler(src):修改src，與viewPic中handler相對應，根據具體情況可以自定義此函數

　　12._handlerBeforeFl():與follow中handlerBeforeFl相對應;功能是獲取img標簽中的title信息，分號作為換行，也可以根據具體情況自定義此函數。

　　13._coverWidth():返回覆蓋層寬

　　14._coverHeight():返回覆蓋層高

　　注意：函數$(),addEvent(),removeEvent()并未封裝到圖片查看器中，因為我認為這三個函數會在網頁中多次應用，為避免重復代碼，故沒有封裝。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈