zoukankan      html  css  js  c++  java
  • 全屏滚动

          最近项目要做一个全屏垂直滚动的宣传效果,目前fullPage.js这个插件已经非常完美了,各种垂直滚动效果和回调功能都十分完善,能快速上手和完成项目开发需求。

    但是自己的js基础非常差,写的也很烂,抱着学习的态度试着用原生来写,大部分的学习资料来源于http://fed.lvmama.com/2014/12,在此我只记录下自己学习过程中遇到的问题和解决方法。

         一.功能

        1.页面不能出现滚动条;

        2.每一屏的宽高刚好满屏,且适应不同分辨率和尺寸的电脑;

        3.支持菜单点击和鼠标滚动事件;

        二.布局 

           <div class="wrap">
                 <div class="page page1">
                         PAGE1
                 </div>
                 <div class="page page2">
                         PAGE2
                 </div>
                 <div class="page page3">
                         PAGE3
                 </div>
                <div class="page page4">
                         PAGE4
                </div>   

            </div>

            body{
                  position: relative;
                  overflow: hidden;
            }
          .wrap{
                 position: absolute;
                  100%;
                 left: 0;
                 top: 0;
           }
         .page{
                100%;
          }

        三.脚本语言

       1.点击菜单索引,页面滚动,闭包实现

       var lis = document.getElementsByTagName("li");

       for(var j = 0; j < lis.length; j++){
          lis[j].onclick = (function(val){
               return function(){
                pageIndex = val; //变更索引为点击的值
                 pageScroll();
       }
       })(j)
    }

      2.滚动鼠标触发屏幕滚动事件

        mouseScroll(document);
        function mouseScroll(elm){
            if(elm.addEventListener){
                elm.addEventListener('DOMMouseScroll',scrollFunc,false);
            }//W3C Firefox
        window.onmousewheel=elm.onmousewheel=scrollFunc;//IE/Opera/Chrome
    };

      3.滚动动画

       timer = setInterval(function (){

          tempTop += 30;
          wap.style.top = tempTop + "px";

         //高度滚到计算的滚动值,则停止定时器
         if(tempTop == -newTop){
            clearInterval(timer);
        }
    },10)

        

        

  • 相关阅读:
    切换RequiredFieldValidator和RegularExpressionValidator提示信息的控件
    添加删除查询字符串中的参数
    动易订单数据表关系
    页面中文乱码问题收集(原创)
    URLRewrite 在 iis6+iis7中的配置
    ASP.NET面试题(英文)
    execve
    pipe管道通信阻塞
    pipe
    linux管道通信
  • 原文地址:https://www.cnblogs.com/dengyy/p/4497986.html
Copyright © 2011-2022 走看看