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脚本编程解决考试分数统计问题
Oct 18 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
WEEX环境搭建与入门详解
Oct 16 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
PHP中,文件上传
2006/12/06 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php二维码生成
2015/10/19 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
javascript如何创建对象
2016/08/29 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
在centos7中分布式部署pyspider
2017/05/03 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python交互式图形编程的实现
2019/07/25 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
比驿:全球酒店比价网
2018/06/20 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
C#面试题问题集
2016/04/02 面试题
小学门卫岗位职责
2013/12/17 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
聘任合同书
2015/09/21 职场文书
银行工作心得体会范文
2016/01/23 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
python中使用redis用法详解
2022/12/24 Redis