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里使用Dom操作Xml
Jan 22 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
对vuex中getters计算过滤操作详解
Nov 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
做个自己站内搜索引擎
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
document.compatMode介绍
2009/05/21 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Django实现简单分页功能的方法详解
2017/12/05 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
python实现学生成绩测评系统
2020/06/22 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
中软Java笔试题
2012/11/11 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
学校七一活动方案
2014/01/19 职场文书
求职简历自我评价范例
2014/03/12 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android