jQuery教学-滑鼠滑入自动播放影片
2009-09-15 22:57
239 查看
一直以來要在網頁嵌入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 > |
? [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> |
v:影片的存放位置 v:影片的存放位置
w:影片播放的寬度 w:影片播放的宽度
h:影片播放的高度 h:影片播放的高度
若w、h沒設,預設為320×240若w、h没设,预设为320×240
範例預覽: 范例预览:
[範例下載] [范例下载]
※解壓縮密碼:minwt.com ※解压缩密码:minwt.com
相关文章推荐
- jquery实现图片左右间隔滚动特效(可自动播放)
- jquery控制背景音乐开关与自动播放提示音的方法
- jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
- jquery控制背景音乐开关与自动播放提示音的方法
- jquery 图片播放器插件(支持自己设定时间,自己设定是否自动播放)
- jquery打造一个会自动播放样子也很经典的选项卡tab
- jQuery可自动播放动画焦点图插件Koala
- jquery 多窗口图片播放以及自动播放
- jquery自己写的带左右箭头自动播放幻灯插件,简化
- JQuery 可自定义自动播放图片 文字 也可以带按钮点击特效
- autoPlay 基于jquery的图片自动播放效果
- jquery实现图片左右间隔滚动特效(可自动播放)
- jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
- 一款基于jQuery可自动播放焦点图
- jquery实现简单的自动播放幻灯片效果
- jquery图片轮播,点击左右按钮轮播,可控制是否自动播放,是否循环轮播(自写)
- jquery实现的网页自动播放声音
- jquery幻灯片,带左右按钮,渐隐渐显,自动播放组件