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 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
简单了解JS打开url的方法
Feb 21 Javascript
Vue实现购物车实例代码两则
May 30 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
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
tab栏切换原理
2017/03/22 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python字符串中查找子串小技巧
2015/04/10 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python Gabor滤波器讲解
2020/10/26 Python
Django框架请求生命周期实现原理
2020/11/13 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
软件项目开发计划书
2014/05/01 职场文书
大班亲子运动会方案
2014/06/10 职场文书
创建文明城市标语
2014/06/16 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
《观察物体》教学反思
2016/02/17 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis