原生js实现全屏滚动

原生js实现全屏滚动(firefox兼容性问题还没解决)

最近发现刷前端在线简历,发现许多人都使用了全屏滚动特效

所以今天特意来实现一下

css样式:
* {
  margin: 0;
  padding: 0;
}
h1 {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
div{
  overflow: hidden;
  position: absolute;
}
.show {
  display: block;
}

/*第一页*/
#one {
  background: red;
  z-index: 4;
}
/*第二页*/
#two {
  background: blue;
  z-index: 3;
}

/*第三页*/
#three {
  background: pink;
  z-index: 2;
}

/*第四页*/
#four {
  background: black;
  z-index: 1;
}

HTML布局:
<!-- 第一页-->
  <div id="one"class="pops hiddens show">
    <h1>杨晓煊</h1>
  </div>
<!-- 第二页-->
  <div id="two" class="pops hiddens">
    <h1>杨晓煊</h1>
  </div>
<!-- 第三页-->
  <div id="three" class="pops hiddens">
    <h1>杨晓煊</h1>
  </div>
<!-- 第四页-->
  <div id="four" class="pops hiddens">
    <h1>杨晓煊</h1>
  </div>

js代码:

<script>

//获取屏幕有效的宽和高.
windowHeight=document.docementElement.clientHeight;
windowWidth=document.documentElement.clientWidth;

//得到div元素的集合

divs=document.getElementsByTagName("div");

/*js实现方法:

(1):先循环div元素集合.然后为div元素绑定事件;

(2):然后为每个div设置一个line属性,从0~div元素的个数.根据line属性的值判断当前显示的div的索引;

(3):然后滑轮滚动时再判断滚动向上还是向下转动.

(4):然后根据滑动方向显示出当前div的上一个或者下一个,同时将当前对象隐藏起来(通过添加类名来实现隐藏!!)

(5):同时设置上限和下限,到达顶部则上滑时直接return;到达底部下滑则直接return.

*/

for(var i=0;i<pops.length;i++){
  divs[i].style.width=windowWidth+"px";
  divs[i].style.height=windowHeight+"px";
  divs[i].setAttribute("line",i);
  divs[i].onmousewheel=function(){
  var line=parseInt(this.getAttribute("line"));

  if(event.wheelDelta<0){
    if(line==3){return;}
    this.classList.remove("show");
    divs[line+1].classList.add("show");
  }else{
    if(line==0){return;}
    this.classList.remove("show");
    divs[line-1].classList.add("show");
    };
  }
}

结语:;第一次发博.第一次自己动手做特效.很粗糙,以后再改进.

时间: 2024-10-13 17:14:21

原生js实现全屏滚动的相关文章

[分享]数字插件countUp.js和全屏滚动插件fullPage.js

分享两款js插件 1:数字插件countUp.js 项目github地址:http://inorganik.github.io/countUp.js/ 2:全屏滚动插件:fullPage.js 项目github地址:https://github.com/alvarotrigo/fullPage.js 示例地址:https://alvarotrigo.com/fullPage/ 原文地址:https://www.cnblogs.com/many-object/p/8405935.html

自己用js实现全屏滚动

参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改成react组件 2.实现更多的效果 注释写的很清楚,基本上知道函数怎么用就可以了.有想法这东西就很简单. 这里偷懒使用了我之前写过的一个运动框架(其实就是一个函数),稍加修改就可以在这上面使用.框架相关:点击这里 注释非常详细了,就不说其他的了.直接上代码: 1 <!DOCTYPE html>

fullpage.js jq全屏滚动插件

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-

js实现全屏滚动进度条

jQuery.fn.extend({ ShowProgress: function (msg, top, proffset, widthX, heightX) { if (msg == null) msg = "Loading Data......"; if (top == null) top = 0; if (proffset == null) proffset = 0; var height = 0; var width = 0; if (heightX != undefined

全屏滚动效果H5FullscreenPage.js

前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 功能清单: 1 快速实现页面全屏滚动效果.并提供多种翻页效果,兼容大部分ios和android系统. 2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果. 3 支持配置音乐功能. 4 支持摇一摇接口功能. 组件核心代码原理: 1 页面滚动 在移动页面上如果想使用滚动,如过没有任何动画

js全屏滚动效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>全屏滚动代码测试</title> 6 <style type="text/css"> 7 body,ul,li{ margin: 0; padding: 0;} 8 #tbody{ overflow: hidden; clear: both;

jquery.fullPage.js全屏滚动插件

效果演示 网站   http://www.51xuediannao.com/demo.php 插件下载  http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示 看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h

全屏滚动实现:fullPage.js和fullPage

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1  引入文件 <!-- 引入css --> <link rel="stylesheet&quo

pagePiling.js - 创建美丽的全屏滚动效果

在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主流浏览器,包含IE8+.支持移动设备.