开关灯效果
<!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.
