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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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/07/12 PHP
Zend引擎的发展 [15]
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Django实现表单验证
2018/09/08 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python如何变换环境
2020/07/21 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
财政专业求职信范文
2014/02/19 职场文书
腾讯广告词
2014/03/19 职场文书
另类冲刺标语
2014/06/24 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫