页面结构

实现思路与大众方法类似，如图

每个section就是一页内容，它的大小充满了屏幕（红色区域），一个Container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面好像上移了，container向上走，页面就下移了。

事件监听

此时窗口里只显示一个页面，我们给其加上滚动监听，因为firefox和非firefox浏览器对滚动监听支持不同，firefox浏览器向上滚动是-120，向下滚动是120，而其他浏览器向上是5，向下是-5，所以需要作判断。

 <!DOCTYPE html>

 <html>

 <head lang="ch">

     <meta charset="UTF-8">

     <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0">

     <title></title>

     <style>

         body, html{

             padding: ;

             margin: ;

         }

         body, html {

             height: %;

             overflow: hidden;

         }

         #container, .section {

             height: %;

         }

         .section {

             background-color: #;

             background-size: cover;

             background-position: % %;

         }

         #section0 {

             background-color: #83af9b;

         }

         #section1 {

             background-color: #764d39;

         }

         #section2 {

             background-color: #ff9000;

         }

         #section3 {

             background-color: #380d31;

         }

     </style>

 </head>

 <body>

 <div id="container">

     <div class="section" id="section0"></div>

     <div class="section" id="section1"></div>

     <div class="section" id="section2"></div>

     <div class="section" id="section3"></div>

 </div>

 <script src="http://code.jquery.com/jquery-latest.js"></script>

 <script>

     var curIndex = ;

     var container = $("#container");

     var sumCount = $(".section").length;

     var $window = $(window);

     var duration = ;

     //时间控制

     var aniTime = ;

     var scrollFunc = function (e) {

         //如果动画还没执行完，则return

         if(new Date().getTime() < aniTime + duration){

             return;

         }

         e = e || window.event;

         var t = ;

         if (e.wheelDelta) {//IE/Opera/Chrome

             t = e.wheelDelta;

             if (t >  && curIndex > ) {

                 //上滚动

                 movePrev();

             } else if (t <  && curIndex < sumCount - ) {

                 //下滚动

                 moveNext();

             }

         } else if (e.detail) {//Firefox

             t = e.detail;

             if (t <  && curIndex > ) {

                 //上滚动

                 movePrev();

             } else if (t >  && curIndex < sumCount - ) {

                 //下滚动

                 moveNext();

             }

         }

     };

     function moveNext(){

         //获取动画开始时的时间

         aniTime = new Date().getTime();

         container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)");

     }

     function movePrev(){

         //获取动画开始时的时间

         aniTime = new Date().getTime();

         container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)");

     }

     function init(){

         /*注册事件*/

         if (document.addEventListener) {

             document.addEventListener('DOMMouseScroll', scrollFunc, false);

         }//W3C

         window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome

         container.css({

             "transition": "all 0.5s",

             "-moz-transition": "all 0.5s",

             "-webkit-transition": "all 0.5s"

         });

     }

     init();

 </script>

 </body>

 </html>

CSS3实现整屏切换效果的更多相关文章

  1. 【CSS3】纯CSS3制作页面切换效果

    此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...

  2. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  3. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  4. css3制作惊艳hover切换效果

    css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  5. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  6. CSS3 :target伪类实现Tab切换效果 BY commy

    http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...

  7. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  8. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  9. CSS3属性之 target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 14. Spring Boot的 thymleaf公共页抽取

    5).CRUD-员工列表实验要求:1).RestfulCRUD:CRUD满足Rest风格:URI: /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作   普通CRUD(uri来区分操作) ...

  2. tensorflow神经网络拟合非线性函数与操作指南

    本实验通过建立一个含有两个隐含层的BP神经网络,拟合具有二次函数非线性关系的方程,并通过可视化展现学习到的拟合曲线,同时随机给定输入值,输出预测值,最后给出一些关键的提示. 源代码如下: # -*- ...

  3. mysql 案例~mysql主从复制延迟处理(2)

    一 简介:今天来聊聊周期性从库延迟的问题,是上一篇的基础分析的一个场景 二 背景:近期每天的指定时间段,收到从库延迟的报警,然后过一段时间恢复.由于从库是提供读服务的,所以需要解决 三 分析思路: 1 ...

  4. 爬虫之验证码IP攻防心得——小总结

    小前言: 一般来说,现在很多平台注册.登录的时候会涉及到验证码,这样做的目的是为了防止恶意程序恶意访问,从而给服务器造成一定的压力,会浪费一定的资源,大家也都知道,现在这种短信平台,邮箱平台等都是收费 ...

  5. Android BroadcastReceiver解析

    目录   示意图 1. 定义 即 广播,是一个全局的监听器,属于Android四大组件之一 Android 广播分为两个角色:广播发送者.广播接收者 2. 作用 监听 / 接收 应用 App 发出的广 ...

  6. vc++调用exe获取输出信息

    目的 调用命令行程序,返回结果. 思路 把命令行结果输入到管道中,exe的输出信息都存在了strOutput这个变量里. 实现代码 CString strCmd = L"yara64.exe ...

  7. 转载 - CNN感受野(receptive-fields)RF

    本文翻译自A guide to receptive field arithmetic for Convolutional Neural Networks(可能需要FQ才能访问),方便自己学习和参考.若 ...

  8. 五、regularized线性回归练习（转载）

    转载链接:http://www.cnblogs.com/tornadomeet/archive/2013/03/17/2964515.html 前言: 本节主要是练习regularization项的使 ...

  9. lxde 的安装和卸载以及注意事项，lubuntu

    安装: $ sudo apt install lxde $ sudo apt install lxde-common 安装完毕后,可能没法关机及logout,可以使用如下安装: $ sudo apt ...

  10. db_recovery_file_dest_size

    select name,space_limit,space_used,number_of_files from v$recovery_file_dest; alter system set db_re ...