jquery skitter插件試用


下載地址:http://www.skitter-slider.net

演示網站:http://thiagosf.net/projects/jquery/skitter


    

    這個插件最大的特色是,它在翻頁或滑動時有非常多的動畫效果,比如立方體形、管道形等等。它還給用戶提供一系列選項進行最大限度的自定義,例如,動畫速度,轉換間隔,圖片文字標籤的設置等。

    使用很簡單,給予正確的配置就行。

    詳細配置參數見:http://blog.sina.com.cn/s/blog_7f95e24b01017ts9.html 和官網。這裏不再贅述。

    wKioL1QOk-bCx6OiAAQ4vQTURn8192.jpg


這裏主要講一下它的缺點。

缺點一:

    也算是BUG我覺得,參數設置全屏的時候寬屏圖片顯示沒問題(官網上全是寬屏圖片),當窄屏大圖片全屏時就不如人意了,以下對比:


wKioL1QOlROxOEjAAAdbGdLBOtA649.jpg

wKioL1QOlbWQwdyUAAOdAquoenA195.jpg


可以清楚的看出來不和諧之處。查看代碼才知道它的‘父母’考慮不周全


wKioL1QOlrWyP3E-AAI6YXEtVuQ335.jpg


只定義了高度,沒有定義寬度(自己寫程序的時候就要注意,要想到所有可能的情況)。於是乎:


wKioL1QOlyzjGKc3AAJm8Mfy_QM800.jpg


看效果:


wKioL1QOl4uR-1vqAAfbR0Hp2xw462.jpg



缺點二:

    不支持手機滑動換圖。對於本來就是要用於手機端的我怎能容忍。

    繼續修改源碼。藉助另一個插件jquery_mobile。

    (去學校學習)用法:


    wKiom1QOuv2w5SWuAAG2shZ-OWc444.jpg

   

 看源碼,找到適合修改的地方,加入代碼:


    wKioL1QOu0-y4bJdAAQzLPV-9oo572.jpg

    

    其實這個是仿照它的前一個和後一個按鈕觸發事件寫的,只不過觸發源改了。

    具體效果不方便演示,就要自己去試了。



    

    用後感想。通過看了幾次它的源碼,發現它和其他幻燈片好的原因是同樣是切換,skitter的切換效果五花八門,可以自己設置,如果你夠牛的話甚至可以定義自己的切換效果;而它之所以有很炫的切換效果是因爲他把一張圖片切成了N個小圖片,然後定義幾個切換效果函數,每個函數使用對應的代碼去操作這些小圖片。現在再去看skitter的切換效果,就會很容易發現都是以那種指定大小的小圖片爲單位切換的。這麼說來skitter真正的乾貨就是這幾個切換效果函數。

    堅持經常看源碼。不懂了看源碼,錯了看源碼,修改前看源碼......




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章