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

最新推荐文章于 2024-11-04 16:17:23 发布
最新推荐文章于 2024-11-04 16:17:23 发布
阅读量124 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/vajoy/p/3991770.html
版权

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

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

还是老样子，所有步骤文件可以从我的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>
View Code

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

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

共勉~

转载于:https://www.cnblogs.com/vajoy/p/3991770.html

dcof99817
关注
JQuery制作图书简介页面
weixin_46528860的博客
10-14 2921
第二章 JQuery选择器 练习1：制作图书简介页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图书简介</title> <link rel="stylesheet" href="css/bookStyle.css"> </head> <body> <section..
使用jQuery制作图书简介
liuyan11223的博客
07-06 1150
jQury里添加样式和鼠标点击事件
jQuery基础--制作图书简介页面
weixin_50419323的博客
10-27 2495
需求： 实现代码：
当当网源代码 jQuery
12-18
ACCP7.0 第九章当当网的代码 要的速度了
JQ实现简单的图书管理（增删）
action_xing的博客
08-13 3268
首先看到第一张，上半部分一个提交对话框，下面一个列表，通过“添加图书”这个按钮将两部分链接在一起。 首先是上半部分:<label>请输入书名：</label> <input type="text"> <p><button>添加图书</button> 当前有<span>3</span>本书</p>这里虽然明显看就是一个表单，但是我没有写form，应为没有实际的页面与WEB服务器交互过程
html5单屏滚动页面案例,20个精巧走心的单页滚动网页设计案例
weixin_42299873的博客
06-05 5436
单页滚动也算是目前网页设计中一个独立的类别了，导航、菜单等网页元素的设计也有一套独特的手法。极简风的导航栏设计其实算不上太多，毕竟导航栏的部分应该是包罗万象并且常驻页面的。而汉堡菜单的存在让导航具备了更优秀的隐藏性，摆脱了滚动条、分页和复杂的下拉框，让页面更整洁，为视觉设计留下更大的空间，留住了用户。另外非常值得注意的一点是，即使导航设计足够隐蔽，用户也不会在页面间迷失，他们比我们设计时所设定的“...
html中文网页模板 大气的科技公司单屏滚动页面模板html.rar
03-11
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，...
jQuery插件windowScroll实现单屏滚动特效
10-23
jQuery插件windowScroll是用于实现单屏滚动效果的工具，它可以让页面中的内容像传统的幻灯片一样上下滚动，并且能够支持左右滚动，为用户带来更加丰富的交互体验。开发者可以灵活地控制滚动速度、方向等参数。 ####...
fullpage全页面滚动插件
06-04
"FullPage.js" 是一个广泛使用的全页面滚动插件，它允许开发者轻松创建这样的效果，同时提供了丰富的定制选项和功能。 全页面滚动插件的核心功能包括： 1. **无缝滚动**：实现页面内容平滑过渡，无需点击导航链接...
JavaScript第6章上机练习1(制作图书简介页面)
拂欢
07-14 8952
ps：首先是链接外部的文件： img { width: 230px; height: 300px; } .textRight { float:left ; } .imgLeft { float:left ; margin-right: 10px; } * { font-size: 13px; } p:nth-child(1) { f...
原生js实现和jQuery实现 屏幕自由滚动广告 悬浮停止
Altaba的博客
12-15 1866
欢迎来到Altaba的博客 2017年12月15日 相信大家都见过某一个网页出现一个广告小方框，像气泡一样滚动在屏幕上，鼠标放上去就停止了还可以做一些操作，本人在工作时候基于一些需求动手实现了这个效果，写了两套，原生js实现和基于jQuery插件实现的，有需要请参阅以下代码 漂浮广告代码 #thediv { z
ReferenceError: Cannot access ‘xxx‘ before initialization
热门推荐
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-21 8万+
执行下面代码 let myname= 'kaimo666' { console.log(myname) let myname= 'kaimo777' } 最终打印结果 分析原因 在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区。 另外一个例子： function test(){ console.log(a) let a = 7; } test() 执行test的时候，编译阶段a已经在内存中，为什么提前访问不了？
Jquery简单实现图书导航
kangk1992的专栏
04-17 2106
说的很玄乎其实就是在普通导航的基础上增加几个jquery动画而已。 代码 var a = false; var b = false; $(document).ready(function () { $('#p1').click(function () { a ? $('#conte
透明图轮播
weixin_43755513的博客
09-09 128
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 377
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1137
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 207
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
安利一款开源企业级的报表系统SpringReport
luck332的专栏
11-04 340
SpringReport是一款企业级的报表系统，支持在线设计报表，并绑定动态数据源，无需写代码即可快速生成想要的报表，可以支持excel报表和word报表两种格式，同时还可以支持excel多人协同编辑，后续考虑实现大屏设计器功能，通过简单的设计器可以生成炫酷的大屏效果。
Vue2+3
最新发布
m0_73557953的博客
11-04 28
创建Vue实例 Vue指令
使用jQuery windowScroll插件创建单屏滚动效果
"使用jQuery插件windowScroll实现的单屏滚动特效，主要参考搜狗浏览器4.2版本首页的上下滚动效果，涵盖了整个窗口的上下和左右滚动逻辑。" 在网页设计中，单屏滚动（Single Page Scrolling）是一种常见的交互效果，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值