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

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

还是老样子,所有步骤文件可以从我的Github上下载。

原理

滚页的方式肯定是通过animate来实现,由被点击的a标签索引来确定要从哪一页滚至哪一页的位置。同时也需要一个全局变量来存储当前页面的索引,这样方便我们通过鼠标滚轮事件来滚页。

另外这里也调用了回调事件,包括点击时被激活页面的回调,以及其它非激活页面的回调,为了提高复用我们会动用 eval() 来帮忙,不过注意这两个回调都应该是在滚页(animate)之后触发的。

我们先写下页面原型:

<!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; padding:20px;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(){ })
</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>

注意必须设置body,html高度为100%,否则无法设置单页的高度(原理可以戳这里

接着写脚本,要让这几个page能够在后续上下运动起来,我们得给它包裹一层div。

$(function(){
var $a = $("#bottom_nav a");
var $wrap = $("#screen_wrap");
var $pages = $wrap.children();
var $moveWrap = $("<div></div>");
$moveWrap.css({"position":"relative","height":"100%"});
$pages.wrapAll($moveWrap); //给五个page外面再包上一层div用以后续上下运动
})

有的朋友可能会好奇,现在不是已经有一层 id="screen_wrap" 的div围住它们了么,为何还要再裹一层。这是因为screen_wrap主要是满足我们“单屏”的需求,即通过设置100%的高度以及 overflow:hidden 来防止浏览器出现滚动条。

另外我们要考虑到,如果窗口发生了缩放,那么page们运动的幅度就不能按照原先的幅度了,我们得重新给幅度做定义(幅度以当前窗口高度为单位):

$(function(){
var a_index=0,thetop,win_h;
var $a = $("#bottom_nav a");
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 = $.VJ_getWin().h;
$a.eq(a_index).click(); //防止窗口缩放时页面布局混乱
}
getHeight();
$(window).on("resize",getHeight); //窗口缩放时,重新初始化上行运动的幅度
})

进一步定义点击a标签的触发事件,让page滚动起来:

$(function(){
var a_index=0,thetop,win_h;
var $a = $("#bottom_nav a");
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().animate({"top":-thetop},500);
})
})

接着添加回调事件,先添加激活页面的回调:

$(function(){
var a_index=0,thetop,win_h;
var $a = $("#bottom_nav a");
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, //加个.stop() 防止卡顿
function(){ //animate结束后的回调
var hasfun = eval("typeof page"+a_index+"==='function'");
if(hasfun){
eval("page"+a_index+"()"); //如果有回调函数则执行该函数
}
}
);
})
var page1 = function(){ //激活页面的回调
$(".page1").animate({"opacity":"0.2"},2000);
}
var page3 = function(){
$(".page3").animate({"opacity":"0.5"},4000);
}
})

这里动用了 eval() 来帮忙,关键时刻还是蛮好用的,虽然常规还是建议少用eval方法。

我们继续添加非激活页面的回调/初始化事件(就是比如你点了page2,切页后page0-1、page3-4要回调的事件):

$(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"});
}
})

至此,我们要的效果就基本完成了(除了监听鼠标滚轮事件),我们贴下完整代码:

<!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>

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

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

共勉~

用JQ仿造百度书籍预售页面的单屏滚页效果的更多相关文章

  1. 【真的是随笔】如何利用htaccess把网站流量引到一个页面上(站点维护页效果)

    咕咕咕,好久没来博客园转悠了,最近(这个最近好长啊)一直没时间写博(事实上也不知道写点什么有逼格的东西),所以一直都在潜水,,,(此处省略n字) 好了切入正题,关于如何把网站的所有流量引向一个页面的方 ...

  2. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

  3. 百度MIP移动页面加速——不只是CDN

    MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...

  4. 百度ueditor解决页面组件被覆盖问题

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:百度ueditor解决页面组件被覆盖问题: 在使用ueditor的过程中,会出现表单组件被ueditor覆盖的问题,解决的方式如下: ue ...

  5. Android 获取浏览器当前分享页面的截屏

    Android 获取浏览器当前分享页面的截屏 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/BrowserScreenShotActivity 文中 ...

  6. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  7. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  8. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

  9. ios单独的页面支持横竖屏的状态调整,HTML5加载下(更新2)

    单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...

随机推荐

  1. C# 理解Thread.Sleep()方法 ----转帖

    我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确的理解这个函数的用法呢?思考下面这两个问题:1.假设现在是 2008-4-7 12:00:00.000,如果我调 ...

  2. updateEasyuiTab

    //tabContainer:easyui-tabs或者id,title名称 this.updateEasyuiTab = function (tabContainer, outTitle, outU ...

  3. html中 table 和 form的位置

    对于web前端开发来说  经常会用到 像firebug这样审查元素 工具 发现了一个这样的现象: 当 able><form><tr>....</tr>< ...

  4. 纯脚本组装Json格式字符串

    var answerStr = "["; for (var i in answer) { var data = $("input[name=QuestionItem_&q ...

  5. depot用例视图建模

    1. 确定系统涉及的内容 图书馆管理系统有以下模块构成:系统登陆模块.图书馆管理模块.学生管理模块.借阅信息管理模块.图书检索模块. 2. 分析系统参与者 确定参与者首先分析系统涉及的问题领域 和 系 ...

  6. QQ浏览器安卓5.8版本的Uint8Array API有bug

    调用new Uint8Array()时QQ浏览器将直接返回参数列表, 比如new Uint8Array(a)将返回[a],比如new Uint8Array(a, b)将返回[a, b],比如new U ...

  7. JS新手易错点

    写给自己 字符串换行不能直接换行,需要在行尾加换行符"\" var a = "aa bb" 是不行的 需要改成 var a="aa\ bb"

  8. HTTP 302 404 500 状态消息

    1xx:信息 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求. 101 Switching Protocols 服务器转换协议:服务器将 ...

  9. SVN修改用户名与密码

    由于在svn的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案如下: 在Eclipse使用SVN的过程中大多数人往往习惯把访问SVN的用户名 ...

  10. Sprint回顾大揭秘——“宝典”来了

    我始终记得当年我作为敏捷教练所做的第一次Sprint回顾,这一切都仿佛就发生在昨天.这家公司实行Scrum有好几年了,我自然而然地认为他们这群人是纪律严明并且成熟稳重的敏捷专家. 因此,当他们计划了一 ...