jQuery教学－滑鼠滑入自动播放影片

一直以來要在網頁嵌入Flash都得要貼很多的碼，以及載入js才可去虛線框，真的不是很方便，於是請教了男丁老師有沒有更方便一點的方法，馬上男丁老師就找到一個jQuery外掛，可快速的將flash嵌入到網頁中，但梅干就在想，若只是單純嵌入實在有些無趣， 於是梅干就想到，之前在blog ad的廣告中曾看到，每當有電影上映時，滑鼠滑入縮圖，就會自動的播放flv影片，這真的很酷～於是梅干昨天就利用了Flex寫了一隻播放器，再透過jQuery把參數丟給它，然後自動播放影片， 並且還可指定要播放影片的大小，樣子就可即時的播放影片，相當的方便，且梅干已經都整合好了，各位只要把縮圖 、 影片位置指定好，就可使用無需撰寫任何的程式碼。一直以来要在网页嵌入Flash都得要贴很多的码，以及载入js才可去虚线框，真的不是很方便，于是请教了男丁老师有没有更方便一点的方法，马上男丁老师就找到一个jQuery外挂，可快速的将flash嵌入到网页中，但梅干就在想，若只是单纯嵌入实在有些无趣，于是梅干就想到，之前在blog ad的广告中曾看到，每当有电影上映时，滑鼠滑入缩图，就会自动的播放flv影片，这真的很酷～于是梅干昨天就利用了Flex写了一只播放器，再透过jQuery把参数丢给它，然后自动播放影片，并且还可指定要播放影片的大小，样子就可即时的播放影片，相当的方便，且梅干已经都整合好了，各位只要把缩图 、 影片位置指定好，就可使用无需撰写任何的程式码。

---

放在＜head＞.....＜/head＞之間： 放在＜head＞.....＜/head＞之间：

^? [Copy to clipboard] View Code JAVASCRIPT ^? [Copy to clipboard] View Code JAVASCRIPT

1 2 3 1 2 3

< script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.pack.js" ></ script > < script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.pack.js" ></ script > < script type = "text/javascript" src = "js/jquery.flash.js" ></ script > < script type = "text/javascript" src = "js/jquery.flash.js" ></ script > < script type = "text/javascript" src = "js/flvplayer.js" ></ script > < script type = "text/javascript" src = "js/flvplayer.js" ></ script >

---

放在＜body＞.....＜/body＞之間： 放在＜body＞.....＜/body＞之间：

^? [Copy to clipboard] View Code HTML ^? [Copy to clipboard] View Code HTML

1 2 3 4 1 2 3 4

<img src="alumb/movie01.jpg" v="video/video01.flv" w="400" h="300"/><br /><br /> <img src="alumb/movie01.jpg" v="video/video01.flv" w="400" h="300"/><br /><br /> <img src="alumb/movie02.jpg" v="video/video02.flv" w="160" h="120"/><br /><br /> <img src="alumb/movie02.jpg" v="video/video02.flv" w="160" h="120"/><br /><br /> <img src="alumb/movie03.jpg" v="video/video03.flv"/><br /> <img src="alumb/movie03.jpg" v="video/video03.flv"/><br /> <div id="swf" style="position:absolute; overflow:hidden;"></div> <div id="swf" style="position:absolute; overflow:hidden;"></div>

src：影片縮圖 src：影片缩图
v：影片的存放位置 v：影片的存放位置
w：影片播放的寬度 w：影片播放的宽度
h：影片播放的高度 h：影片播放的高度

若w、h沒設，預設為320×240若w、h没设，预设为320×240

---

範例預覽： 范例预览：

---

[範例下載] [范例下载]
※解壓縮密碼：minwt.com ※解压缩密码：minwt.com