Jquery实现视频播放页面的关灯开灯效果


Posted in Javascript onMay 27, 2013

本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素,该元素是html5的元素,所以使用支持html5的浏览器效果会更好。
效果预览网址: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>
Javascript 相关文章推荐
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 #Javascript
使用jquery实现div的tab切换实例代码
May 27 #Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 #Javascript
jquery实现的一个导航滚动效果具体代码
May 27 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
php use和include区别总结
2019/10/13 PHP
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
学期自我鉴定
2013/11/04 职场文书
学校元旦晚会方案
2014/02/19 职场文书
公司承诺书怎么写
2014/05/24 职场文书
十佳青年事迹材料
2014/08/21 职场文书
教师节标语大全
2014/10/07 职场文书
华清池导游词
2015/02/02 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
老员工辞职信范文
2015/05/12 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL