利用jQ HTML5實現視差滑動幻燈片



31 123 42



特效描述:利用jQ HTML5實現 視差滑動 幻燈片,利用jQ HTML5實現視差滑動幻燈片

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/screen.css?v=1.3" media="screen" />
<link href="css/zzsc.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/html5.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/zzsc.js?v=1.4"></script>

3. HTML代碼

	<section id="content" role="main">	
		<nav class="cycle-nav-container" role="navigation">			
			<h2 class="offset">Nawigacja mi?dzy projektami</h2>
			<ul class="list-b" id="cycle-1-nav">
				<li class="hitmo"><a href="#hitmo">Hitmo</a></li>
				<li class="fastpr"><a href="#fastpr">FastPr</a></li>
				<li class="thinkmedia"><a href="#thinkmedia">Thinkmedia</a></li>
				<li class="arkana"><a href="#arkana">Arkana</a></li>
				<li class="bioway"><a href="#bioway">Bioway</a></li>
				<li class="nana"><a href="#nana">Nanaform</a></li>
				<li class="akademia"><a href="#akademia">Akademia Social Media</a></li>
			</ul>
		</nav><!-- .cycle-nav-container -->
		<section class="box-c cycle-a">
			<article class="cycle-item hitmo" id="hitmo" data-thumbnail="hitmo_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Hittin’<br/> the web</h1>
							<p>Powstali?my aby uderza? mocno i celnie.<br/> Wiele lat pracy z czo?owymi agencjami interaktywnymi nauczy?o nas jak<br/> dzia?a? skutecznie.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Zobacz co mo?emy dla Ciebie zrobi?</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-hitmo.png" width="599" height="487" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item fastpr" id="fastpr" data-thumbnail="fastpr_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Najszybszy<br/> PR w sieci.</h1>
							<p>Stworzyli?my identyfikacj? wizualn? i serwis www dla agencji PR, która oferuje ciekawy sposób na szybkie i skuteczne us?ugi online.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz si? wi?cej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<div class="special-box">									
								<h2 class="header-fastpr">FastPR</h2>
								<p class="text-a">Finalista Democamp startups 2010</p>
								<p class="democamp"><img src="images/democamp-logo.png" width="133" height="25" alt="Democamp Logo"/></p>
							</div><!-- .special-box -->
							<p class="image-a"><img src="images/vis-fastpr.png" width="458" height="325" alt=""/></p>
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item thinkmedia" id="thinkmedia" data-thumbnail="thinkmedia_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Nie tylko<br/> dla geeków.</h1>
							<p><q>“Najlepsze ksi??ki to te, o których ka?dy czytelnik s?dzi, ?e takie by te? napisa?.”</q> To zdanie <cite>Blaise Pascala</cite> jest mottem wydawnictwa Thinkmedia, dla którego stworzyli?my nowy serwis www.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz si? wi?cej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-thinkmedia.png" width="471" height="488" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item arkana" id="arkana" data-thumbnail="arkana_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Prawo dla<br/> biznesu.</h1>
							<p>Kancelaria Prawna Arkana na co dzień <br/> pomaga przedsi?biorcom wybra?<br/> korzystne rozwi?zania dla ich biznesu. <br/>My pomogli?my jej w wyborze <br/> odpowiednich rozwi?zań internetowych.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz si? wi?cej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/> <!--<img src="images/project-visuals/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/>--></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item bioway" id="bioway" data-thumbnail="bioway_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Smacznie<br/> i zdrowo</h1>
							<p>Filozofia BIOWAY to sprostanie<br/> oczekiwaniom klientów, którzy dbaj?<br/> o to, co i w jaki sposób jedz?.<br/> My zadbali?my o zdrow? obecno??<br/> BIOWAY w internecie.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz si? wi?cej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a">								
								<img src="images/vis-bioway_2.png" width="589" height="461" alt=""/>
							</p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item nana" id="nana" data-thumbnail="nana_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Wn?trze<br/> i forma</h1>
							<p>M?ode studio projektowe, dla którego<br/> tworzenie wn?trz to przyjemno?? <br/>i pasja. My z pasj? podeszli?my do<br/> stworzenia ich wizerunku.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz si? wi?cej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-nana.png" width="531" height="256" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item akademia" id="akademia" data-thumbnail="akademia_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Akademia<br/> social<br/> media</h1>
							<p>My?lisz ?e znasz media spo?eczno?ciowe?<br/> W Akademii Social Media poka??<br/> Ci takie rzeczy, ?e ho ho...</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a lnka-a">Dowiedz si? wi?cej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-akademia.png" width="577" height="427" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div>
			</article>
		</section>
		<section class="box-a" role="complementary">
			<div class="wrapper-b">
				<ul class="list-c" id="navBoxes" role="navigation">
					<li class="what-we-do">
						<a href="#">
							<h2>Us?ugi</h2>
							<p>Zobacz w czym<br/> mo?emy Ci pomóc. W tym jeste?my najlepsi.</p>
							<p class="more-b">Wi?cej</p>
						</a>
					</li>
					<li class="team">
						<a href="#">
							<h2>Zespó?</h2>
							<p>Nie trzeba by?<br/> “fabryk?” by<br/> tworzy? skuteczne<br/> rozwi?zania.</p>
							<p class="more-b">Wi?cej</p>
						</a>						
					</li>
					<li class="faq">
						<a href="#">
							<h2>Wspó?praca</h2>
							<p>Etapy wspó?pracy<br/> i warto?ci jakimi<br/> si? kierujemy.</p>
							<p class="more-b">Wi?cej</p>
						</a>
					</li>
					<li class="contact">
						<a href="#">
							<h2>Kontakt</h2>
							<p>Zadaj pytanie,<br/> zapytaj o wycen?,<br/> powiedz cze??.</p>
							<p class="more-b">Wi?cej</p>
						</a>						
					</li>
				</ul>
			</div>
			<div style="width:100%; height:50px;"></div>		
		</section>
	</section>
	<script src="js/zzsc.js?v=1.4"></script>	
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 帶簡介的焦點圖 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 中国福利彩票36选7开奖结果 双色球是假的,不要上当 天津快乐10分查询结果 重庆时时彩彩票论坛群 福建11选5即乐彩开奖 云南快乐10分群 一个平台走账赚钱是什么 每只股票都会赚钱吗 梦幻西游怎么抓持国赚钱 幸运农场计划软件手机版 甘肃快三走势图带连线 河北快三规则及中奖规则 双色球三维选号 恒大线上娱乐网址 正好彩票网黑龙江11选5开奖结果 安徽11选5爱彩乐