您的位置：首页 > 其它

用JQ仿造百度书籍预售页面的单屏滚页效果

2014-09-24 23:11 169 查看

今天的项目需要做到一个介绍页面，我主动提出走单屏滚页的风格，毕竟交互性好，逼格也高，具体效果可以参照百度知道书籍预售页面。

其实现效果就大概是这样的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>滚页效果</title>
<script src="jq.js"></script>
<style type="text/css">
body,html {height:100%; margin:0;}
.screen_wrap{position:relative; height:100%; overflow:hidden;}
.page{ position:relative; width:100%; height:100%;}
.page0{ background:yellow;}
.page1{ background:red;color:white;}
.page2{ background:green;}
.page3{ background:blue;color:yellow;}
.page4{ background:gray; color:white;}
.bottom_nav{ position:fixed; bottom:0px;padding:10px 0px;width:100%; text-align:center; background:black; opacity:0.8;}
.bottom_nav a{margin:0px 10px; color:white;}
</style>
<script type="text/javascript">
$(function(){
var a_index=0,thetop,win_h,hasfun;
var $a = $("#bottom_nav a");
var a_len = $a.length;  //获得a的个数（其实也就是page个数）
var $wrap = $("#screen_wrap");
var $pages = $wrap.children();
var $moveWrap = $("<div></div>");
$moveWrap.css({"position":"relative","height":"100%"});
$pages.wrapAll($moveWrap);
var getHeight = function(){
win_h = $(window).height();
$a.eq(a_index).click();
}
getHeight();
$(window).on("resize",getHeight);
$a.click(function(){
a_index = $a.index(this);
thetop = a_index * win_h;
$pages.parent().stop().animate({"top":-thetop},500,
function(){  //animate结束后的回调
hasfun = eval("typeof page"+a_index+"==='function'");
if(hasfun){
eval("page"+a_index+"()");  //如果有回调函数则执行该函数
}
for(var i=0;i<a_len;i++){
if(i==a_index) continue;
hasfun = eval("typeof reset"+i+"==='function'");
if(hasfun){
eval("reset"+i+"()");  //如果有其它page初始化函数则执行该函数
}
}
}
);
})
var page1 = function(){
$(".page1").animate({"opacity":"0.2"},2000);
}
var page3 = function(){
$(".page3").animate({"opacity":"0.5"},4000);
}
var reset1 = function(){ //初始化函数
$(".page1").stop().css({"opacity":"1"});
}
var reset3 = function(){
$(".page3").stop().css({"opacity":"1"});
}
})
</script>
</head>
<body>
<div class="screen_wrap" id="screen_wrap">
<div class="page page0">第一页</div>
<div class="page page1">第二页</div>
<div class="page page2">第三页</div>
<div class="page page3">第四页</div>
<div class="page page4">第五页</div>
</div>
<div class="bottom_nav" id="bottom_nav">
<a href="#!/1">第1页</a>
<a href="#!/2">第2页</a>
<a href="#!/3">第3页</a>
<a href="#!/4">第4页</a>
<a href="#!/5">第5页</a>
</div>
</body>
</html>

View Code

后续大家可以自行加上鼠标滚轮事件，向上和向下分别触发上滚页和下滚页事件，由于监听鼠标滚轮事件又是一门小学问，在这里就不赘述了。

但你可以通过这里来获得包括鼠标滚轮事件在内的全部效果，我把单屏滚页事件和鼠标滚轮监听事件都封装到我的个人插件VaJoyJS中，有兴趣的朋友可以从我插件源码中一窥究竟。

共勉~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航