zoukankan      html  css  js  c++  java
  • 全屏滑动效果

    上代码:

    <div id="wrap" class="wrap">
      <div id="main" class="main">
    	<div class="full-page" style="background-color: aqua;"></div>
    	<div class="full-page" style="background-color: cadetblue"></div>
    	<div class="full-page" style="background-color: chartreuse;"></div>
    	<div class="full-page" style="background-color: darkcyan;"></div>
      </div>
    </div>
    
    *{
      padding: 0;
      margin: 0;
    }
    body{
      height: 100%;
      overflow: hidden;
    }
    .wrap{
      height: 100vh;
    }
    .main{
      transition:ease-in .6s;  
      position: relative;
      top: 0;
    }
    .main > div{
      height: 100vh;
    }
    
    let h = document.getElementById('wrap').offsetHeight
    let num = 0
    let isScroll = false
    let len = document.getElementsByClassName('full-page').length
    window.addEventListener('mousewheel', function(e){
      if(e.wheelDelta < 0 && num<len-1){
    	// console.log('下滑')
    	if(!isScroll){
    	  num++
    	  document.getElementById('main').style.top = '-'+num*h+'px'
    	  isScroll = true
    	  setTimeout(()=>{
    		isScroll = false
    	  },1200)
    	}
      }
      if(e.wheelDelta > 0 && num>0){
    	// console.log('上滑')
    	if(!isScroll){
    	  num--
    	  document.getElementById('main').style.top = '-'+num*h+'px'
    	  isScroll = true
    	  setTimeout(()=>{
    		isScroll = false
    	  },1200)
    	}
      }
    })
    

      

  • 相关阅读:
    Extjs4单选按钮
    下拉框comboxBox本地数据源示例
    处理您的请求时发生异常。此外,对第一个异常执行自定义错误页时发生另一异常。已终止请
    hoj1568
    hoj3434
    poj2924
    poj2909
    hoj3433
    理解Python闭包,这应该是最好的例子
    Spring 学习笔记
  • 原文地址:https://www.cnblogs.com/zpfqi/p/14480382.html
Copyright © 2011-2022 走看看