自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

支持同一頁(yè)面多次使用的jQuery插件

開(kāi)發(fā) 前端
此插件可以在上下左右四個(gè)方向上顯示導(dǎo)航,背景滑動(dòng)動(dòng)畫(huà)可以獨(dú)立設(shè)置,播放區(qū)域動(dòng)畫(huà)可以獨(dú)立設(shè)置,每次進(jìn)入顯示區(qū)域?qū)Ш綌?shù)量可以獨(dú)立設(shè)置,如果設(shè)置錯(cuò)誤或者設(shè)置不合理會(huì)被插件內(nèi)部重置。

演示Demo : http://ethanzhu.github.com/jq.imageShown/Demo.html

演示的Demo中主要提供了幾家視屏網(wǎng)站的廣告示例,(搜狐 奇藝 迅雷 QQ視屏)

更新 1.2版本 刪除回調(diào)函數(shù)的控制臺(tái)輸出調(diào)試,因?yàn)樵贗E6下沒(méi)有控制臺(tái)會(huì)造成插件出錯(cuò), 完成build功能。 提示信息按鈕支持多個(gè),此版本為***的穩(wěn)定版。

近期將會(huì)提供更加詳細(xì)的data書(shū)寫(xiě)格式說(shuō)明,build時(shí)html格式說(shuō)明,詳細(xì)的options參數(shù)說(shuō)明。補(bǔ)充內(nèi)容類型的切換展示案例。

Introduction:

jquery imageShown 插件可以完成多種形式的內(nèi)容輪顯切換, 所有我提供的Demo中雖然都是導(dǎo)航帶動(dòng)的輪顯圖片,但是它還能完成內(nèi)容的切換,即可以完成Tab功能,單純的圖片輪顯功能,新聞信息的輪顯。 也就是說(shuō)這個(gè)插件在使用合理參數(shù)的配合下可以顯示任何形式的內(nèi)容。

此插件可以在上下左右四個(gè)方向上顯示導(dǎo)航,背景滑動(dòng)動(dòng)畫(huà)可以獨(dú)立設(shè)置,播放區(qū)域動(dòng)畫(huà)可以獨(dú)立設(shè)置,每次進(jìn)入顯示區(qū)域?qū)Ш綌?shù)量可以獨(dú)立設(shè)置,如果設(shè)置錯(cuò)誤或者設(shè)置不合理會(huì)被插件內(nèi)部重置。提示信息是否顯示,以及顯示動(dòng)畫(huà)可以獨(dú)立設(shè)置。具體請(qǐng)參考Demo相關(guān)內(nèi)容。

注:在使用Tab功能時(shí)需要設(shè)置 pContent為 content 并且由于由于顯示區(qū)域已經(jīng)被固定大小,所以針對(duì)未知大小的內(nèi)容請(qǐng)?jiān)赾allback函數(shù)中處理。

插件內(nèi)部已經(jīng)對(duì)請(qǐng)求的資源是否存在做了判斷,例如出現(xiàn)錯(cuò)誤你可以直接顯示參數(shù)中你提供默認(rèn)顯示信息,同時(shí)你也可以在callback函數(shù)中對(duì)這個(gè)錯(cuò)誤區(qū)域進(jìn)行處理。callback函數(shù)你可以接收回傳的參數(shù)。
回傳參數(shù)的說(shuō)明:

  1. id //當(dāng)前Dom的ID,在你頁(yè)面未設(shè)置ID的情況下這個(gè)ID會(huì)是插件自動(dòng)生成的唯一值。   
  2.  
  3. total //輪顯內(nèi)容的數(shù)量   
  4.  
  5. /*  
  6. 當(dāng)前選擇的***個(gè)內(nèi)容區(qū)域,當(dāng)你loop設(shè)置為false時(shí)此內(nèi)容就是頁(yè)面Dom中的index值,當(dāng)loop為true時(shí)導(dǎo)航區(qū)域需要根據(jù) attr('data-index')來(lái)獲取當(dāng)前的index。player區(qū)域不受loop限制,永遠(yuǎn)為當(dāng)前內(nèi)容的index值  
  7. */  
  8. selected  
  9.  
  10. curNav//當(dāng)前導(dǎo)航,可以通過(guò) attr('data-missing')來(lái)確認(rèn)內(nèi)容是否正常加載。  
  11.  
  12. curPlay//當(dāng)前顯示的主要內(nèi)容,可以通過(guò) attr('data-missing')來(lái)確認(rèn)內(nèi)容是否正常加載。  
  13.  
  14. curData//你傳入數(shù)據(jù)data的當(dāng)前值。   
  15.  

下一步開(kāi)發(fā)計(jì)劃:
當(dāng)你不愿意或者不會(huì)使用data參數(shù)時(shí),你可以講需要顯示的內(nèi)容按照固定格式寫(xiě)入html頁(yè)面,然后使用 build命令由插件自行完成余下內(nèi)容
例如: 

  1. $('elem').imageShown('bulid');   
  2. $('elem').imageShown('bulid',{'options'});   
  3. $('elem').imageShown('bulid','option','value');  

提供外部暫停和重啟自動(dòng)播放的接口,方便你能夠在回調(diào)函數(shù)中進(jìn)行使用。 提供更多的說(shuō)明和示例。

默認(rèn)參數(shù):

  1. id:    null,  
  2.         navSpace: 47,   
  3.         pWidth: 0 ,   
  4.         pHeight:0 ,   
  5.         navNum: 4,   
  6.         navPlace: null,   
  7.         autoPlay: true,   
  8.         autoTime: 4000,   
  9.         events: 'mouseenter',   
  10.         tbgAnimate: true,   
  11.         tbgSpeed: 'fast',   
  12.         addtional:false,  
  13.         step: 1,   
  14.         scrollSpeed:'fast',  
  15.         opacity:0.6,   
  16.         data: null,   
  17.         loop: true,   
  18.         player: true,   
  19.         animate: 'fade',//left,right,top,bottom,fade,none  
  20.         //deepNav: false,   
  21.         showTips: true,   
  22.         tipsAnimate: 'fade',//fade,slide  
  23.         selected: 1,   
  24.         callback: null,   
  25.         preload: true,   
  26.         target: '_blank',   
  27.         pSpeed:500,   
  28.         pType: false,  
  29.         tContent:'image',//num,none,image,content  
  30.         listPlace:null,  
  31.         tipsBtn:false,   
  32.         loadClass: 'img-player-loading',  
  33.         pContent:'image' 

使用方法:

  1. $('elem').imageShown({'options'});  
  2. setter:  
  3. $('elem').imageShown('option',{'options'});  
  4. $('elem').imageShown('option','option','value');  
  5. getter  
  6. var option = $('elem').imageShown('option','option name');  

在build功能完成之后將提供更加相信的參數(shù)以及配置的說(shuō)明。

同時(shí)buid將會(huì)以擴(kuò)展的形式發(fā)布,即需要使用build功能時(shí),需要引入另外的文件。這樣做的目的是為了解決文件大小問(wèn)題。

插件經(jīng)過(guò)非常多的暴虐暫時(shí)沒(méi)發(fā)現(xiàn)問(wèn)題,性能上已經(jīng)處理的很好,經(jīng)過(guò)測(cè)試暫時(shí)未發(fā)現(xiàn)內(nèi)存泄露問(wèn)題。測(cè)試平臺(tái):ie6,firefox3.6, windows2003

歡迎您能夠給我提出寶貴的意見(jiàn)。

Future:

計(jì)劃在播放區(qū)域內(nèi)加入上一張,下一張按鈕。(只在計(jì)劃中,暫未具體實(shí)施。)

原文鏈接:http://www.cnblogs.com/zhuyidong/archive/2012/04/28/2475347.html

責(zé)任編輯:張偉 來(lái)源: Ethan.zhu的博客
相關(guān)推薦

2012-04-24 10:36:08

jQuery插件

2011-10-28 11:11:45

應(yīng)用設(shè)計(jì)移動(dòng)設(shè)備

2020-10-15 06:34:45

內(nèi)存代碼背景頁(yè)

2011-05-10 14:49:30

SEO404頁(yè)面

2022-04-28 15:38:42

WebViewJavaUI

2011-04-01 16:15:11

Zabbix報(bào)錯(cuò)

2013-12-02 15:31:37

jQuery插件

2018-02-06 09:39:45

404錯(cuò)誤頁(yè)面錯(cuò)誤

2020-12-13 12:14:45

H5開(kāi)發(fā)H5-Dooring

2013-06-04 10:11:28

Google用戶體驗(yàn)設(shè)計(jì)UED

2017-04-21 12:26:03

數(shù)據(jù)庫(kù)監(jiān)控團(tuán)隊(duì)效率

2017-05-10 07:33:41

AndroidWebView視頻

2009-08-05 18:14:52

ASP.NET 2.0

2022-07-26 00:00:02

TCPUDPMAC

2013-12-02 15:25:38

jQuery插件

2020-03-09 15:27:25

開(kāi)源技術(shù) 趨勢(shì)

2013-12-02 14:53:20

jQuery插件

2024-03-18 08:21:06

TCPUDP協(xié)議

2011-09-21 09:32:08

HTML 5

2017-04-07 17:00:51

Android仿拉鉤動(dòng)效
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)