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 14 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
JS函数本身的作用域实例分析
Mar 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
JavaScript静态的动态
2006/09/18 Javascript
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
react build 后打包发布总结
2018/08/24 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python中私有属性的定义方式
2020/03/05 Python
Django日志及中间件模块应用案例
2020/09/10 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
JPA的特点
2014/10/25 面试题
《鸟岛》教学反思
2014/04/26 职场文书
文化建设工作方案
2014/05/12 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
承诺书样本
2014/08/30 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
学风建设主题班会
2015/08/17 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python