以下是 百度微任务全屏滑动jQuery特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度微任务全屏滑动jQuery特效</title>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/main_new.css?version=1" rel="stylesheet">
<script>
//var loginFlag = false;
//var loginHelper = null;
$(document).ready(function(){
$('.carousel').carousel(
{
"pause":"false",
"interval":20000
}
);
$('.carousel').on('slide.bs.carousel', function (event) {
var tag = $(event.relatedTarget).attr("tag");
var progress = $(event.relatedTarget).attr("progress");
$('#img_home').attr("src", "images/home.png");
$('#img_intro').attr("src", "images/intro.png");
$('#img_gift').attr("src", "images/gift.png");
$('#img_feedback').attr("src", "images/feedback.png");
$('#img_related').attr("src", "images/related.png");
$('#img_' + tag).attr("src", "images/" + tag + "_selected.png");
//$("#progress").width(progress + "px");
//$("#progress").css('left', (progress / 2) - 400 + "px");
$("#progress").animate({width: progress, left: (progress / 2) - 400}, 500);
playAnimation(tag);
});
$("body,html").animate({
scrollTop:($("#page_home .splash-container").offset().top)
},10);
playAnimation("home");
});
function switchPage(pageIndex){
$('.carousel').carousel(pageIndex);
}
function playAnimation(tag){
var ani1 = $("#page_" + tag + " .ani_step_1");
var ani2 = $("#page_" + tag + " .ani_step_2");
var ani3 = $("#page_" + tag + " .ani_step_3");
var pre_start = ((tag == "home") ? 0 : 300);
if(ani1 != null){
ani1.css("opacity", 0);
setTimeout(function(){
ani1.animate({opacity: 1}, 1000);
}, 10 + pre_start);
}
if(ani2 != null){
ani2.css("opacity", 0);
setTimeout(function(){
ani2.animate({opacity: 1}, 1000);
}, 1500 + pre_start);
}
if(ani3 != null){
ani3.css("opacity", 0);
setTimeout(function(){
$("#page_" + tag + " .ani_step_3").animate({opacity: 1}, 1000);
}, 3000 + pre_start);
}
}
</script>
</head>
<body>
<div>
<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="#" target="_blank" id="splash_download_button" class="download-button">
<div class="download-title">
<div id="download_icon"></div><span> 立即体验</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="#">百度手机浏览器</a>扫描</div>
</div>
</div>
</div>
<div id="ct_link" class="ani_step_3">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="#" target="_blank">程序员设计师联盟淘宝店</a></p>
</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="#" target="_blank" id="splash_download_button" class="download-button ani_step_1">
<div class="download-title">
马上赚钱 <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">
邮件反馈 <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="#" target="_blank" id="splash_download_button" class="download-button">
<div class="download-title">
<div id="download_icon"></div><span> 立即体验</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="#">百度手机浏览器</a>扫描</div>
</div>
</div>
</div>
<p>更多精彩内容请访问 <a target="_blank" href="#">13141618.taobao.com</a> ></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>
</body>
</html>
CSS代码(main_new.css):
*,h2,h3{font-family:微软雅黑;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:none;}
a:focus{text-decoration:none;}
.container{margin:0 auto;}
.horizental-item{float:left;}
html{height:100%;}
body{height:100%;}
#pass-phoenix-list-login{width:224px;}
.pass-login-pop-img,.pass-login-pop-img img{height:362px !important;}
#ad{width:100%;height:0;}
.full_height{height:100%;min-height:850px;}
.page{height:100%;}
#page_home{background-color:rgb(227,118,31);}
#main{height:100%;}
#page_home #main{background:url('../images/bg_main.jpg') no-repeat top center;}
#splash{min-width:960px;height:100%;}
.splash-container{top:120px;text-align:center;position:relative;}
.qrcode{margin-top:5px;height:90px;width:90px;}
#qrcode_hint{font-size:14px;color:rgba(255,255,255,0.5);margin-left:2px;margin-top:5px;}
.download-button{display:block;text-align:center;cursor:pointer;}
#download_icon{width:31px;height:31px;background:url('../images/download-icon.png') no-repeat;margin-top:5px;display:inline-block;position:relative;top:5px;}
.download-button:hover #download_icon{}
#splash_introduction{text-align:center;font-size:20px;line-height:31px;color:rgb(255,255,255);}
#splash_download_qrcode{left:10px;position:relative;height:110px;width:200px;z-index:0;text-align:left;}
#page_home #splash_introduction{margin-top:25px;text-shadow:2px 2px 2px rgb(235,125,39);}
#page_home #download_btn_group{margin:0 auto;margin-top:60px;width:760px;}
#page_home #splash_download_button{position:relative;z-index:1;}
#page_home #download_place_holder{width:200px;height:1px;}
#page_home .download-button{width:320px;height:100px;}
#page_home .download-button:hover{}
#page_home .download-button:active{}
#page_home .download-button:hover .download-title{background-color:rgb(255,216,185);}
#page_home .download-button:hover .download-subtitle{background-color:rgb(255,216,185);}
#page_home .download-button .download-title{background-color:rgb(255,255,255);padding-top:10px;font-size:28px;line-height:74px;font-weight:bold;color:rgb(72,83,66);border-radius:2px 2px 0 0;}
#page_home .download-button .download-subtitle{border:0px;border-top:1px rgb(226,117,33);border-style:solid;background-color:rgb(255,255,255);font-size:11px;line-height:31px;color:rgb(196,110,28);border-radius:0 0 2px 2px;}
#page_home #ct_link{margin-top:30px;color:white;}
#page_home a{color:rgb(255,246,0);}
.footer{position:absolute;top:650px;text-align:center;width:100%;height:120px;}
#dash{margin:0 auto;height:2px;width:800px;background:url('../images/dot.png');position:relative;top:25px;}
#progress{margin:0 auto;height:2px;width:150px;left:-325px;background:white;position:relative;top:23px;}
#navbtns{width:800px;position:relative;z-index:1;}
.navbtn{width:100px;float:left;margin-left:25px;margin-right:25px;text-align:center;display:inline-block;line-height:50px;color:white;}
.navbtn a:hover{color:white;}
.navbtn img{width:50px;}
#page_intro{background-color:rgb(232,227,22);}
#page_gift{background-color:rgb(33,166,210);}
#page_gift #splash_introduction{margin-top:100px;}
#page_gift #splash_download_button{margin:0 auto;margin-top:40px;position:relative;z-index:1;}
#page_gift .download-button{width:260px;height:60px;background-color:rgb(255,255,255);border-radius:2px 2px 2px 2px;}
#page_gift .download-button .download-title{margin:0 auto;padding-top:15px;font-size:20px;color:rgb(33,166,210);}
#page_gift .download-button:hover{background-color:rgb(207,243,255);}
#page_feedback{background-color:rgb(134,196,87);}
#page_feedback #splash_introduction{margin-top:100px;}
#page_feedback #splash_download_button{margin:0 auto;margin-top:40px;position:relative;z-index:1;}
#page_feedback .download-button{width:260px;height:60px;background-color:rgb(255,255,255);border-radius:2px 2px 2px 2px;}
#page_feedback .download-button:hover{background-color:rgb(229,255,208);}
#page_feedback .download-button .download-title{margin:0 auto;padding-top:15px;font-size:20px;color:rgb(85,146,39);}
#page_related{background-color:rgb(211,59,68);}
#page_related #main{background:url('../images/bg_related.jpg') no-repeat top center;}
#page_related .splash-container{width:900px;position:relative;left:50px;}
#page_related .download-button{width:260px;height:60px;background-color:rgb(255,255,255);border-radius:2px 2px 2px 2px;}
#page_related .download-button .download-title{margin:0 auto;padding-top:20px;font-size:20px;color:rgb(134,196,87);}
#page_related #related_demo{}
#page_related #splash_introduction{margin-top:50px;margin-left:50px;width:500px;text-align:left;padding-left:15px;font-size:14px;line-height:20px;}
#page_related #splash_introduction .container{padding-left:0px;margin-bottom:30px;}
#page_related #splash_introduction h3{margin-left:10px;}
#page_related #download_btn_group{margin-top:30px;}
#page_related #splash_download_button{position:relative;z-index:1;}
#page_related .download-button{width:320px;height:100px;}
#page_related .download-button:hover{}
#page_related .download-button:active{}
#page_related .download-button:hover .download-title{background-color:rgb(243,218,221);}
#page_related .download-button:hover .download-subtitle{background-color:rgb(243,218,221);}
#page_related .download-button .download-title{background-color:rgb(255,255,255);padding-top:10px;font-size:28px;line-height:74px;font-weight:bold;color:rgb(72,83,66);border-radius:2px 2px 0 0;}
#page_related .download-button .download-subtitle{border:0px;border-top:1px rgb(211,59,68);border-style:solid;background-color:rgb(255,255,255);font-size:11px;line-height:31px;color:rgb(211,59,68);border-radius:0 0 2px 2px;}
#page_related a{color:rgb(255,245,139);}
#declaration{margin-top:50px;color:rgba(255,255,255,0.5);}
分享到QQ
分享到微博
微信扫一扫
