视频网站开关灯特效

最新推荐文章于 2023-10-11 08:48:25 发布

icodec

最新推荐文章于 2023-10-11 08:48:25 发布

阅读量529

点赞数

分类专栏： JavaScript WebDev

本文链接：https://blog.csdn.net/icodec/article/details/8004735

版权

WebDev 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

开关灯效果

<!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>关灯/开灯效果 | blog.ibuo.org </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#movie {
	position:absolute;
	background:#fff;
	z-index:10;

	float:center;
	/*width:420px;*/
	text-align:left;
	margin-right:20px;
	padding:1px

}

.lightSwitcher,
.turnedOff {
	position:absolute;
	z-index:11;
	background:url(light_bulb.png) no-repeat 0 0;

	margin-top: 40px;
	margin-left: 30px;
	padding:0;
	text-indent:30px;
	outline:none;
	text-decoration:none;
	zoom:1;
}
.lightSwitcher:hover {
	text-decoration:underline;
}

#shadow {
	background:#000;
	position:absolute;
	z-index:5; 

	left:0;
	top:0;
	width:100%;

	opacity:0.80;
	filter: alpha(opacity = 80);
	zoom:1;
}

.turnedOff {
	color:#00FF00;
	background-position:0 -50px;
}
</style>

<script language="javascript" src="jquery-1.7.2.js"></script>
<script language="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>
<!--[if IE 6]>
<script language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script language="javascript">
	DD_belatedPNG.fix('.lightSwitcher, .turnedOff');
</script>
<![endif]-->
</head>

<body>

	<div style="padding:20px 0 ">演示视频网站开关灯效果</div>
	<a class="lightSwitcher" href="#">关灯</a>

<div id="movie">
	<img src="vedio.jpg">
</div>

<div id="shadow"></div>

</body>
</html>

代码下载：lightoff source code and other attachments.

Posted by ian at 02:58