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)

        

        

  • 相关阅读:
    .net 调用命令行进行解压缩
    《jQuery实战》第1章 引荐JQuery
    将指定URL文件下载到指定服务器
    Oracle学习笔记
    Spring3 AOP的使用
    Field类使用以及getDeclaredFields方法
    spring 3的使用
    Json数据类型
    RotateAnimation详解
    GsonJava对象生成Json串
  • 原文地址:https://www.cnblogs.com/dengyy/p/4497986.html
Copyright © 2011-2022 走看看