jquery网页开关灯特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery网页开关灯特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <title>jquery��ҳ���ص���Ч</title>
        <style>
			body { background: url(images/bg_body.jpg) repeat-x #e5e5e5; padding: 0; margin: 0; }
			h1 { font-family: "Contrail One"; margin-bottom: 5px; font-size: 36px; }
			.container { position: relative; padding: 50px; width: 45%; margin: 0 auto; }
			h1 a, h1 a:link, h1 a:visited { color: #4C4C4C; text-decoration: none; }
			h1 a:hover, h1 a:focus { color: #6B6B6B; text-decoration: none; }
			#top { position: relative; display: block; background: #c72034; height: 10px; margin: 0 0 10px 0; border-bottom: 1px solid #E5E5E5; }
        </style>
		<link href='http://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css'>
		
		<!-- Allofthelights.js CSS -->
		<link rel="stylesheet" href="jquery.allofthelights.css">
    </head>
    <body>     
		<div id="top"></div>
		<div class="container">
			<h1>jquery��ҳ���ص���Ч</h2>			
			<!-- Allofthelights.js switch & iframe video -->
			<div id="switch"></div>
			<iframe id="video" width="600" height="338" src="https://www.baidu.com" frameborder="0" allowfullscreen></iframe>
		</div>
    
		<script src="jquery-1.7.2.min.js"></script>
		
		<!-- Allofthelights.js JS -->
		<script src="jquery.allofthelights.min.js"></script>
		<script>
		$(document).ready(function() {
			$("#video").allofthelights();  
		});
		</script>
	</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)