Jquery实现视频播放页面的关灯开灯效果
2013-05-27 00:00
756 查看
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素,该元素是html5的元素,所以使用支持html5的浏览器效果会更好。
效果预览网址:http://www.keleyi.com/keleyi/phtml/guandeng/
完整代码:
效果预览网址:http://www.keleyi.com/keleyi/phtml/guandeng/
完整代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>张国荣《千千阙歌》--脚本之家关灯特效</title> <style type="text/css"> body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;} #container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;} #movie_keleyi_com {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px; position:relative; z-index:102;} #description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;} #command { position:relative; height:25px; display:block; margin: 25px 0 0 0;} .lightSwitcher {position:absolute; z-index:101; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb_off.png); background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;} .lightSwitcher:hover {text-decoration:underline;} #shadow {background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;} .turnedOff {color:#ffff00; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb.png);} #clickHere {position:absolute; top: -25px; left:130px;} </style> <script src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#shadow").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function () { $("#shadow").toggle(); if ($("#shadow").is(":hidden")) $(this).html("关灯").removeClass("turnedOff"); else $(this).html("开灯").addClass("turnedOff"); }); }); </script> </head> <body> <div id="container"> <div id="header"> <h1>张国荣《千千阙歌》</h1> <h2>柯乐义关灯特效</h2> <div id="command"><img src="http://www.keleyi.com/keleyi/phtml/guandeng/click_here.png" alt="" id="clickHere" /><a class="lightSwitcher" href="javascript:void();">关灯</a></div> </div> <div id="movie_keleyi_com"> <embed src="http://player.youku.com/player.php/sid/XMjE1ODgyMTU2/v.swf" quality="high" width="560" height="340" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed> </div> <div id="description"> <p></p> <p></p> <p></p> <p><br /> <a href="http://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target="_blank" >可改变大小DIV层</a><br /> <a href="http://www.keleyi.com/a/bjac/141932b419e08101.htm" target="_blank" >jquery使用ColorBox弹出图片组浏览层</a><br /> <a href="http://www.keleyi.com/dev/433ee98f4133d7b5.htm" target="_blank" >jQuery实现可拖动的浮动层(版本2)</a><br /> <a href="http://www.keleyi.com/dev/7fd16e1b9849dba4.htm" target="_blank" >jquery“收藏本页”代码</a><br /> <a href="http://www.keleyi.com/a/bjac/1329fae4a4a54bdd.htm" target="_blank" >柯乐义高级弹出菜单(可以有三级菜单)</a><br /> <a href="http://www.keleyi.com/a/bjac/939631bb07adb4dc.htm" target="_blank" >关灯特效原文</a> </p> </div> </div> <div id="shadow"></div> </body> </html>
相关文章推荐
- Jquery实现视频播放页面的关灯开灯效果
- 利用DecorView实现播放视频开灯/关灯效果和仿QQ消息提示框
- 利用DecorView实现播放视频开灯/关灯效果和仿QQ消息提示框
- jQuery实现浮动层跟随页面滚动效果
- 【Android】Android开发实现进度条效果,SeekBar的简单使用。音量,音乐播放进度,视频播放进度等
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- 页面加载中jquery逐渐消失效果实现
- 使用jquery实现页面正在加载的效果
- 通过jquery实现页面的动画效果
- Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)
- [jQuery编程挑战]001:实现页面元素加速动画效果
- VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷
- jquery实现页面百叶窗走马灯式翻滚显示效果的方法
- jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
- iOS中三种方式实现登录界面播放视频或gif效果
- jQuery实现浮动层跟随页面滚动效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- jQuery oLoader实现的加载图片和页面效果
- jQuery实现自动切换播放的经典滑动门效果