調用jQuery特效實作(MP3控件篇)
(圖片來源:GOOGLE圖片搜尋,關鍵字「MP3 + 美女」的...第七頁。XD)
自從上次[E-mail轉貼]上床前與後這篇,因為美圖拐了不少人進去看,造成當日該篇文章人氣竄升。
可見這是個正妹當道的世代,圖還是弄美一點的好些。(奸)
繼「調用jQuery特效實作(隱藏迴響欄位篇)」、「調用jQuery特效實作(Tab控件篇)」這兩篇之後,大家對於jQuery的調用應該很熟悉了。這篇是調用jQuery特效實作的第三彈囉,也是一樣簡單的三個步驟就能實現3KB大小的jQuery版MP3播放控件,我們就一步一步的來實作吧~*
步驟一:導入jQuery程式庫及調用MP3控件語法
jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
MP3控件語法於此處下載(3KB),將檔案解壓縮後放置於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置:
1 2 3 4 | <!-- 導入jQuery程式庫 --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- 調用jQuery版MP3播放器 --> <script type="text/javascript" src="http://您空間的網址/jquery.jmp3.js"></script> |
設置如下圖(請自行修改jquery.jmp3.js檔案所放置的位置):
步驟二:定義singlemp3player.swf的所在目錄。
使用WordPad或文字編輯軟體修改jquery.jmp3.js中的第33行,填寫您放置singlemp3player.swf的所在目錄。當然裡面MP3的相關參數也可一併調整(Ex:前、背景顏色、音量、自動及循環播放、允許下載否)。
1 | var playerpath = "http://您空間的網址/" |
步驟三:加入jQuery版MP3播放器語法
語法非常簡單...僅此一行!
1 | <span class="mp3">http://您空間的網址/您的MP3檔.mp3</span> |
顯示效果:
範例MP3檔取自於「藍色生死戀插曲-祈禱(諾的電鋼琴亂彈版)」這篇,點擊播放或下載測試看看吧。
http://arno-run.myweb.hinet.net/blue_pray_arno.mp3
OK,所有設置完畢,自行檢查試驗jQuery的效果吧。^_^
附註:
1、經測試,MP3檔可放置於任何可正常存取的網路空間。(Google Sites空間例外,IE會失效)
2、jQuery具有跨瀏覽器平台的重要特性,各大瀏覽器均可正常呈現特效。
3、諾提供的jQuery檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。^_^
語法比較生硬..
多些美圖,平衡一下.感謝版主.
mp3小心觸法喔!
http://tw.news.yahoo.com/article/url/d/a/090409/78/1hinp.html
可能要放無版權,
以免惹來不必要的麻煩
圖選的真好~
To 百里幻雲
呵呵,應該的,語法 + 美女希望不會太突兀。 😛
To 梅干扣肉
嗯,MP3版權確實要注意,這部分諾都很小心。 😀
放上部落格的都是諾自彈自錄的,所以Safe。^_^
諾的自彈自唱的檔案多大呀?下載還蠻快的。
To A`Vai Poitsonu
這首2638KB差不多2.7MB左右。 😳
我把它放在Hinet空間,速度還蠻快的。^_^
那是大陸的 "台电科技" 請的麻豆,
最近的MP3隨身聽產品都有請來拍。
可以去官網看看
To None
哇塞,你好厲害!一張圖就能找到是哪家公司請的麻豆。XD
不...是因為我有買他們家的產品,
我可以打包票,
他們家的產品可以打死一堆台灣做MP3隨身聽的『大廠』
現在對岸已經開始急起直追了。
像我買的X19,4G。
網拍買全新品1000多,
開箱後才知道裡面竟然有申請SRS音效技術。
另一款T50+也很讚,打算來買一台。
To None
嗯,只要有好的品管,對岸的東西也是很有品質的。^_^
寫得很好,很詳細, 程序這東西只能親身實踐!
發表您的迴響(連結不含Nofollow)
近期迴響 咕狗搜尋 切換語言
敗家誌°社群
友好連結(輪播)
電子郵件訂閱
Histats計數器
贊助敗家誌°
迴響排行榜
標籤雲
ADSL Blog Domain Google GPS iPhone jQuery N82 Nokia Plugs SQL WordPress YouTube 串文 便宜貨 免費 公告 勸敗 地圖 工人舍 微軟 心得分享 感動 搞笑 敗家 更新 權限 正妹 正體中文 玩具 疊疊樂 知識 禮物 系統優化 純手工 網站資源 職場工作 虛擬主機 語法 資料庫 軟體分享 遊戲 金融 開箱文 電影
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.
徽章。創用
隨機文章
視頻。精選 »
活躍文章(近期)
- 觀看次數:
- 觀看次數:
- 觀看次數:
熱門文章(全部)
- 觀看次數:
- 觀看次數:
- 觀看次數:
串聯貼紙