基于jQuery實現百度微任務全屏滑動特效



34 132 45



特效描述:基于jQuery實現 百度微任務 全屏滑動,基于jQuery實現百度微任務全屏滑動特效

代碼結構

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main_new.css?version=1" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

3. HTML代碼

<div id="ad"></div>
<div id="carousel_container" class="carousel slide full_height">
	<div class="carousel-inner full_height">
		<div id="page_home" class="page item active" tag="home" progress="150">
			<div id="main">
				<div id="splash">
					<div class="container splash-container">
						<img src="images/title.png" alt="百度微任務" class="ani_step_2"/>
						<div id="splash_introduction" class="ani_step_2">
							<img src="images/home_desc.png" alt="百度微任務介紹"/>
						</div>
						<div id="download_btn_group" class="container ani_step_1">
							<div id="download_place_holder" class="horizental-item" ></div>
							<div class="horizental-item">
								<a href="http://51qianduan.com/" target="_blank" id="splash_download_button" class="download-button">
									<div class="download-title">
										<div id="download_icon"></div><span>&nbsp;&nbsp;立即體驗</span>
									</div>
									<div class="download-subtitle">
										百度微任務V2.2.1 Android下載 12月31日更新
									</div>
								</a>
							</div>
							<div class="horizental-item">
								<div id="splash_download_qrcode">
									<img class="qrcode" src="./images/qrcode.png" alt="二維碼下載">
									<div id="qrcode_hint">建議使用<a href="http://51qianduan.com/">百度手機瀏覽器</a>掃描</div>
								</div>
							</div>
						</div>
						<div id="ct_link" class="ani_step_3">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="page_intro" class="page item" tag="intro" progress="300">
			<div id="main">
				<div id="splash" class="ani_step_1">
					<div class="container splash-container">
						<img src="images/intro_splash.png" alt="微任務介紹"/>
					</div>
				</div>
			</div>
		</div>
		<div id="page_gift" class="page item" tag="gift" progress="450">
			<div id="main">
				<div id="splash">
					<div class="container splash-container ani_step_2">
						<img src="images/gift_splash.png" alt="精美禮品"/>
					</div>
					<div id="splash_introduction" class="ani_step_2">
						<h2>賺禮券,換大禮!</h2>
						<p>快來登錄眾測平臺,賺禮券兌換豐厚實物大禮!<br>
						iPad、小米、百度U盤,海量禮品等您拿!</p>
					</div>
					<a href="http://51qianduan.com/" target="_blank" id="splash_download_button" class="download-button ani_step_1">
						<div class="download-title">
							馬上賺錢&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow_gift.png" alt="訪問">
						</div>
					</a>
				</div>
			</div>
		</div>
		<div id="page_feedback" class="page item" tag="feedback" progress="600">
			<div id="main">
				<div id="splash">
					<div class="container splash-container ani_step_2">
						<img src="images/feedback_splash.png" alt="意見反饋"/>
					</div>
					<div id="splash_introduction" class="ani_step_2">
						<h2>人人都是產品經理!</h2>
						<p>報BUG、提優化,請把您天馬行空的創意反饋給我們;<br>
						如新功能建議被采納,還有驚喜奉上哦!</p>
					</div>
					<a href="mailto:[email protected]" id="splash_download_button" class="download-button ani_step_1">
						<div class="download-title">
							郵件反饋&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/arrow_feedback.png" alt="反饋">
						</div>
					</a>
				</div>
			</div>
		</div>
		<div id="page_related" class="page item" tag="related" progress="750">
			<div id="main">
				<div id="splash" class="ani_step_1">
					<div class="container splash-container">
						<div class="horizental-item">
							<img id="related_demo" src="images/related_demo.png" alt="演示項目"/>
						</div>
						<div class="horizental-item">
							<div id="splash_introduction">
								<div class="container">
									<div class="horizental-item">
										<img src="images/fresh_icon.png" alt="嘗鮮"/>
									</div>
									<div class="horizental-item">
										<h3>優先體驗未發布功能,<br>成為百度產品設計師!</h3>
									</div>
								</div>
								<p>我們將對您的以下行為以禮券結算:<br>
									通過百度嘗鮮下載百度產品;<br>
									通過百度嘗鮮優先體驗百度產品嘗鮮版;<br>
									對線上版和嘗鮮版產品提供意見和反饋;
								</p>
								<div id="download_btn_group" class="container">
									<div class="horizental-item">
										<a href="http://51qianduan.com/" target="_blank" id="splash_download_button" class="download-button">
											<div class="download-title">
												<div id="download_icon"></div><span>&nbsp;&nbsp;立即體驗</span>
											</div>
											<div class="download-subtitle">
												百度嘗鮮V3.1.1 下載 11月20日更新
											</div>
										</a>
									</div>
									<div class="horizental-item">
										<div id="splash_download_qrcode">
											<img class="qrcode" src="./images/qrcode_fresh.png" alt="二維碼下載">
											<div id="qrcode_hint">建議使用<a href="http://51qianduan.com/">百度手機瀏覽器</a>掃描</div>
										</div>
									</div>
								</div>
								<p>更多精彩內容請訪問&nbsp;<a target="_blank" href="http://51qianduan.com/">51qianduan.com</a>&nbsp;&gt;</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="footer" >
    <div id="navbar">
		<div id="dash" ></div>
		<div id="progress"></div>
		<div id="navbtns" class="container" >
			<div class="navbtn">
				<a href="javascript:switchPage(0)">
					<img id="img_home" src="images/home_selected.png" alt="首頁">
					<div>首頁</div>
				</a>
			</div>
			<div class="navbtn">
				<a href="javascript:switchPage(1)">
					<img id="img_intro" src="images/intro.png" alt="微任務介紹">
					<div>微任務介紹</div>
				</a>
			</div>
			<div class="navbtn">
				<a href="javascript:switchPage(2)">
					<img id="img_gift" src="images/gift.png" alt="精美禮品">
					<div>精美禮品</div>
				</a>
			</div>
			<div class="navbtn">
				<a href="javascript:switchPage(3)">
					<img id="img_feedback" src="images/feedback.png" alt="意見反饋">
					<div>意見反饋</div>
				</a>
			</div>
			<div class="navbtn">
				<a href="javascript:switchPage(4)">
					<img id="img_related" src="images/related.png" alt="相關產品">
					<div>相關產品</div>
				</a>
			</div>
		</div>
    </div>
</div>
</div>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 導航切換 菜單切換 滑動選項卡 滑動切換 全屏切換 按鈕控制
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子