jQuery+html5全屏背景切换点击按钮svg背景滑动切换特效

作者(出处):百宝箱工作室发布时间:2016年7月21日 19:17:29查阅量:1304

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 SVG全屏滑块切换特效</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<!--必要样式-->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<section class="cd-slider-wrapper">
	<ul class="cd-slider">
		<li class="visible">
			<div>
				<h2>百宝箱工作室</h2>
				<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
				<a href="http://www.baibaox.com/" target="_blank">来源:百宝箱工作室,技术支持:QQ 425680248</a>			</div>
		</li>
		<li>
			<div>
				<h2>百宝箱工作室</h2>
				<p><a href="http://www.baibaox.com/" target="_blank">www.baibaox.com</a></p>
			</div>
		</li>
		<li>
			<div>
				<h2>百宝箱工作室</h2>
				<p><a href="http://www.baibaox.com/" target="_blank">www.baibaox.com</a></p>
			</div>
		</li>
		<li>
			<div>
				<h2>百宝箱工作室</h2>
				<p><a href="http://www.baibaox.com/" target="_blank">www.baibaox.com</a></p>
			</div>
		</li>
	</ul> <!-- .cd-slider -->
	<ol class="cd-slider-navigation">
		<li class="selected"><a href="#0"><em>Item 1</em></a></li>
		<li><a href="#0"><em>Item 2</em></a></li>
		<li><a href="#0"><em>Item 3</em></a></li>
		<li><a href="#0"><em>Item 4</em></a></li>
	</ol> <!-- .cd-slider-navigation -->
	<div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
		<svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
			<title>SVG cover layer</title>
			<desc>an animated layer to switch from one slide to the next one</desc>
			<path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
		</svg>
	</div> <!-- .cd-svg-cover -->
</section> 
<!-- .cd-slider-wrapper -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息