基于jQuery实现百度微任务全屏滑动特效



41 163 55



特效描述:基于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:microtask@baidu.com" 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

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