跳到主要內容

用jQuery做的滿版slideshow

話說某天大老闆靈機一動說想要首頁如同samsXng的滿版slideshow效果, 該公司是用FLASH開發, 在AS下f command 或是在 embed 屬性中加入 allowFullScreen="true", 簡單的就是在html width屬性設定100%
為了顧及公司在Alexa的排名與SEO, 盡量避免使用FLASH作為首頁, 所以必須要用jQuery技術, 在最短的時間內要做出來, Fullscreen的滿版程式難度不高, 可以參考的plugin有Supersized, 很有名的galleriffic也寫了一個Fullscreen的slideshow但目前不公開語法也不賣錢, 不知道是啥原因, 我該如何寫出這個高級班的效果, 讓我苦惱了幾天。


最後還是要感謝jQuery官網的API文件, 所有的問題回歸原點才會有正確的邏輯思維, 最後我參考了lof的免費資源, 順利的完成滿版slideshow, 但是還不夠完整, 因為無法做到每張圖片的preload, 這樣會拖垮網站速度, 希望有空可以修改, 寫成更完整的plugin.

Demo:http://cindy8.myweb.hinet.net/demo_full/index3.html 因為hinet堪入了廣告會造成些許不正常, 圖片為MSI版權所有
標籤：

留言

張貼留言

這個網誌中的熱門文章

Indexed Database API - Initail

As a front web developer, I could create UI faster or Optimize file to load page faster. But it hard to faster response time form server however 80-90% of the end-user response time is spent on the frontend. Nowadays we could use the Indexed Database API, or IndexedDB to reduce the request times. Less request times, less response time. What is IndexedDB ? IndexedDB is web browser standard interface for a local database of records holding simple values and hierarchical objects. IndexedDB was initially proposed by Oracle in 2009./* wiki */ What browsers would support IndexedDB ? Most browsers of hybrid devices support it exclude IE9-, Safari 7-,iOS Safari 7.1-, Opera Mini, Android Browser 4.3-./* caniuse.com */ When shall we use IndexedDB ? Save Money on web hosting Data index sort Data keyword search Keep data for period of time How to start it? //*************************************************************** //initDB //{Object}, {data: dbName, objectStore: storeName, ...
張貼留言
閱讀完整內容

最近設計的一組icon..太有APPLE風格被打槍了

張貼留言
閱讀完整內容

jQuery 的slideToggle太好用了

$ ( ".collapse" ) .each ( function ( index, value ) { $ ( this ) . click ( function ( evt ) { evt.preventDefault ( ) ; //prevent the default click event of the anchor tag. var target = $ ( this ) .attr ( "data-toggle" ) ; $ ( "." + target ) .slideToggle ( ) ; } ) ; } ) ; http://code-tricks.com/create-a-common-toggler-for-div-using-jquery/
張貼留言
閱讀完整內容