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 add event remove event
Apr 07 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP中Session的概念
2006/10/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
解析PHP的session过期设置
2013/06/29 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
angularJS模态框$modal实例代码
2017/05/27 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Django的models模型的具体使用
2019/07/15 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
五种Python转义表示法
2020/11/27 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
行政人员工作职责
2013/12/05 职场文书
高中军训广播稿
2014/01/14 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
入党自荐书范文
2015/03/05 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书