利用jQuery实现页面过渡转换



8 31 11



特效描述:利用jQuery实现 页面 过渡转换,利用jQuery实现页面过渡转换

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script src="js/pagetransitions.js"></script>

3. HTML代码

		<div class="pt-triggers">
			<button id="iterateEffects" class="pt-touch-button">Show next page 
			transition</button>
			<div id="dl-menu" class="dl-menuwrapper">
				<button>Choose a transition</button>
				<ul class="dl-menu">
					<li>
						<a href="#">Move</a>
						<ul class="dl-submenu">
							<li class="dl-back"><a href="#">back</a></li>
							<li data-animation="1"><a href="#">Move to left/ 
							from right</a></li>
							<li data-animation="2"><a href="#">Move to right/ 
							from left</a></li>
							<li data-animation="3"><a href="#">Move to top/ from 
							bottom</a></li>
							<li data-animation="4"><a href="#">Move to bottom/ 
							from top</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Fade</a>
						<ul class="dl-submenu">
							<li class="dl-back"><a href="#">back</a></li>
							<li data-animation="5"><a href="#">Fade / from right</a></li>
							<li data-animation="6"><a href="#">Fade / from left</a></li>
							<li data-animation="7"><a href="#">Fade / from 
							bottom</a></li>
							<li data-animation="8"><a href="#">Fade / from top</a></li>
							<li data-animation="9"><a href="#">Fade left / Fade 
							right</a></li>
							<li data-animation="10"><a href="#">Fade right / 
							Fade left</a></li>
							<li data-animation="11"><a href="#">Fade top / Fade 
							bottom</a></li>
							<li data-animation="12"><a href="#">Fade bottom / 
							Fade top</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Different easing</a>
						<ul class="dl-submenu">
							<li class="dl-back"><a href="#">back</a></li>
							<li data-animation="13"><a href="#">Different easing 
							/ from right</a></li>
							<li data-animation="14"><a href="#">Different easing 
							/ from left</a></li>
							<li data-animation="15"><a href="#">Different easing 
							/ from bottom</a></li>
							<li data-animation="16"><a href="#">Different easing 
							/ from top</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Scale</a>
						<ul class="dl-submenu">
							<li class="dl-back"><a href="#">back</a></li>
							<li data-animation="17"><a href="#">Scale down / 
							from right</a></li>
							<li data-animation="18"><a href="#">Scale down / 
							from left</a></li>
							<li data-animation="19"><a href="#">Scale down / 
							from bottom</a></li>
							<li data-animation="20"><a href="#">Scale down / 
							from top</a></li>
							<li data-animation="21"><a href="#">Scale down / 
							scale down</a></li>
							<li data-animation="22"><a href="#">Scale up / scale 
							up</a></li>
							<li data-animation="23"><a href="#">Move to left / 
							scale up</a></li>
							<li data-animation="24"><a href="#">Move to right / 
							scale up</a></li>
							<li data-animation="25"><a href="#">Move to top / 
							scale up</a></li>
							<li data-animation="26"><a href="#">Move to bottom / 
							scale up</a></li>
							<li data-animation="27"><a href="#">Scale down / 
							scale up</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Rotate</a>
						<ul class="dl-submenu">
							<li class="dl-back"><a href="#">back</a></li>
							<li>
								<a href="#">Glue</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="28"><a href="#">Glue 
									left / from right</a></li>
									<li data-animation="29"><a href="#">Glue 
									right / from left</a></li>
									<li data-animation="30"><a href="#">Glue 
									bottom / from top</a></li>
									<li data-animation="31"><a href="#">Glue top 
									/ from bottom</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Flip</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="32"><a href="#">Flip 
									right</a></li>
									<li data-animation="33"><a href="#">Flip 
									left</a></li>
									<li data-animation="34"><a href="#">Flip top</a></li>
									<li data-animation="35"><a href="#">Flip 
									bottom</a></li>
								</ul>
							</li>
							<li data-animation="36"><a href="#">Fall</a></li>
							<li data-animation="37"><a href="#">Newspaper</a></li>
							<li>
								<a href="#">Push / Pull</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="38"><a href="#">Push 
									left / from right</a></li>
									<li data-animation="39"><a href="#">Push 
									right / from left</a></li>
									<li data-animation="40"><a href="#">Push top 
									/ from bottom</a></li>
									<li data-animation="41"><a href="#">Push 
									bottom / from top</a></li>
									<li data-animation="42"><a href="#">Push 
									left / pull right</a></li>
									<li data-animation="43"><a href="#">Push 
									right / pull left</a></li>
									<li data-animation="44"><a href="#">Push top 
									/ pull bottom</a></li>
									<li data-animation="45"><a href="#">Push 
									bottom / pull top</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Fold / Unfold</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="46"><a href="#">Fold 
									left / from right</a></li>
									<li data-animation="47"><a href="#">Fold 
									right / from left</a></li>
									<li data-animation="48"><a href="#">Fold top 
									/ from bottom</a></li>
									<li data-animation="49"><a href="#">Fold 
									bottom / from top</a></li>
									<li data-animation="50"><a href="#">Move to 
									right / unfold left</a></li>
									<li data-animation="51"><a href="#">Move to 
									left / unfold right</a></li>
									<li data-animation="52"><a href="#">Move to 
									bottom / unfold top</a></li>
									<li data-animation="53"><a href="#">Move to 
									top / unfold bottom</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Room</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="54"><a href="#">Room to 
									left</a></li>
									<li data-animation="55"><a href="#">Room to 
									right</a></li>
									<li data-animation="56"><a href="#">Room to 
									top</a></li>
									<li data-animation="57"><a href="#">Room to 
									bottom</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Cube</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="58"><a href="#">Cube to 
									left</a></li>
									<li data-animation="59"><a href="#">Cube to 
									right</a></li>
									<li data-animation="60"><a href="#">Cube to 
									top</a></li>
									<li data-animation="61"><a href="#">Cube to 
									bottom</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Carousel</a>
								<ul class="dl-submenu">
									<li class="dl-back"><a href="#">back</a></li>
									<li data-animation="62"><a href="#">Carousel 
									to left</a></li>
									<li data-animation="63"><a href="#">Carousel 
									to right</a></li>
									<li data-animation="64"><a href="#">Carousel 
									to top</a></li>
									<li data-animation="65"><a href="#">Carousel 
									to bottom</a></li>
								</ul>
							</li>
							<li data-animation="66"><a href="#">Sides</a></li>
						</ul>
					</li>
					<li data-animation="67"><a href="#">Slide</a></li>
				</ul>
			</div><!-- /dl-menu-wrapper-->
			<div style="text-align:center;clear:both">
</div>
		</div><!-- /triggers -->
		<div id="pt-main" class="pt-perspective">
			<div class="pt-page pt-page-1"><h1>jQuery页面过渡转换</h1></div>
			<div class="pt-page pt-page-2"><h1>jQuery页面过渡转换</h1></div>
			<div class="pt-page pt-page-3"><h1>jQuery页面过渡转换</h1></div>
			<div class="pt-page pt-page-4"><h1>jQuery页面过渡转换</h1></div>
			<div class="pt-page pt-page-5"><h1>jQuery页面过渡转换</h1></div>
			<div class="pt-page pt-page-6"><h1>jQuery页面过渡转换</h1></div>
		</div>
		<div class="pt-message">
			<p>Your browser does not support CSS animations.</p>
		</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 全屏切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到