zoukankan      html  css  js  c++  java
  • 全屏滚动的原理及实现

    之前用fullpage插件做过全屏滚动的页面,今天用js自己实现了一下,还蛮简单的微笑.

    首先html结构为

    [html] view plain copy
     
    1. <div id="wrap">  
    2.     <div id="main">  
    3.         <div id="page1" class="page"></div>  
    4.         <div id="page2" class="page"></div>  
    5.         <div id="page3" class="page"></div>  
    6.         <div id="page4" class="page"></div>  
    7.     </div>      
    8. </div>  

    wrap块为窗口可看到的部分,我们可以通过js获取窗口可视区的大小,并为其设置overflow: hidden属性,使得窗口不出现滚动条,只显示窗口大小的一页内容;

    设置main定位为relative,通过改变main块的top属性实现不同页面的切换,具体的css代码如下:

    [css] view plain copy
     
    1. html,body{  
    2. margin: 0;  
    3. padding: 0;  
    4. }  
    5. #wrap{  
    6.      100%;  
    7.     overflow: hidden;  
    8.     background: #ccc;  
    9. }  
    10. #main{  
    11.      100%;  
    12.     background: #ccc;  
    13.     position: relative;  
    14. }  
    15. .page{  
    16.     100%;  
    17.     margin:0;  
    18. }  
    19. #page1{  
    20.     background:#E4E6CE;  
    21. }  
    22. #page2{  
    23.     background:#6CE26C;  
    24. }  
    25. #page3{  
    26.     background:#BF4938;  
    27. }  
    28. #page4{  
    29.     background:#2932E1;  
    30. }  

    js代码的主要部分就是对滚动事件的函数绑定,大多数浏览器提供了 “mousewheel” 事件,Firefox 3.5+不支持,但支持相同作用的事件:”DOMMouseScroll”;

    mousewheel事件“event.wheelDelta” 属性值:返回的如果是正值说明滚轮是向上滚动;

    DOMMouseScroll事件“event.detail” 属性值:返回的如果是负值说明滚轮是向上滚动;每页高度为document.body.clientHeight+’px’;

    具体代码如下:

    [javascript] view plain copy
     
    1. var pages = document.getElementsByClassName("page");  
    2. var wrap = document.getElementById("wrap");  
    3. var len = document.documentElement.clientHeight;  
    4. var main = document.getElementById("main");  
    5. wrap.style.height = len + "px";  
    6. for(var i=0; i<pages.length; i++){  
    7.     pages[i].style.height = len + "px";  
    8. }  
    9. if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
    10.     document.addEventListener("DOMMouseScroll",scrollFun);  
    11. }else if(document.addEventListener){  
    12.     document.addEventListener("mousewheel",scrollFun,false);  
    13. }else if(document.attachEvent){  
    14.     document.attachEvent("onmousewheel",scrollFun);  
    15. }else{  
    16.     document.onmousewheel = scrollFun;  
    17. }  
    18. var startTime = 0;  
    19. var endTime = 0;  
    20. var now = 0;  
    21. function scrollFun(e){  
    22.     startTime = new Date().getTime();  
    23.     var event = e || window.event;  
    24.     var dir = event.detail || -event.wheelDelta;  
    25.     if(startTime - endTime > 1000){  
    26.         if(dir>0 && now > -3*len){  
    27.             now -= len;   
    28.             main.style.top = now +"px";  
    29.             endTime = new Date().getTime();  
    30.         }else if(dir<0 && now < 0){  
    31.             now += len;  
    32.             main.style.top = now +"px";  
    33.             endTime = new Date().getTime();  
    34.         }  
    35.     }else{  
    36.         event.preventDefault();      
    37.     }  
    38. }  
  • 相关阅读:
    hdu 1269 迷宫城堡 (并查集)
    hdu 1272 小希的迷宫 (深搜)
    hdu 1026 Ignatius and the Princess I (深搜)
    hdu 1099 Lottery
    hdu 1068 Girls and Boys (二分匹配)
    几个基础数位DP(hdu 2089,hdu 3555,uestc 1307 windy 数)
    hdu 1072 Nightmare (广搜)
    hdu 1398 Square Coins (母函数)
    hdu 1253 胜利大逃亡 (深搜)
    hdu 1115 Lifting the Stone (求重心)
  • 原文地址:https://www.cnblogs.com/mm2015/p/9095212.html
Copyright © 2011-2022 走看看