<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="./animate.css">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div {
font-size: 30px;
text-align: center;
}
body {
overflow: hidden;
}
.fir {
background-color: aliceblue;
transition: all 2s;
}
.sec {
background-color: antiquewhite;
transition: all 2s;
}
.thr {
background-color: aqua;
transition: all 2s;
}
.fou {
background-color: aquamarine;
transition: all 2s;
}
.fiv {
background-color: bisque;
transition: all 2s;
}
.page .active{
color:green;
background-color: blueviolet;
}
.active .sec {
background-color: red;
}
</style>
</head>
<body>
<div id='wrap'>
<div class="page fir">
<div class="animated">page one</div>
</div>
<div class="page sec">
<div>page two</div>
</div>
<div class="page thr">
<div>page three</div>
</div>
<div class="page fou">
<div>page four</div>
</div>
<div class="page fiv">
<div>page five</div>
</div>
</div>
<script>
window.onload = function () {
var wrap = document.getElementById('wrap');
var page = document.getElementsByClassName('page');
var pagelength = page.length;
var index = 0;
// wrap.style.height=window.innerHeight*pagelength+'px';
for (var i = 0; i < pagelength; i++) {
page[i].style.height = window.innerHeight + 'px';
page[i].setAttribute('id', i)
}
document.body.scrollTop = 0;
document.addEventListener('mousewheel', wheel)
var istrue = true;
function wheel(e) {
if (istrue) {
istrue = false;
if (e.wheelDelta > 0) {
console.log(e.wheelDelta)
var pageh = document.body.scrollTop - window.innerHeight;
pageh = pageh < 0 ? 0 : pageh;
index = pageh / window.innerHeight;
//
for (var i = 0; i < pagelength; i++) {
page[i].classList.remove('active')
}
page[index].classList.add('active')
animation(document.body, {
'scrollTop': pageh
}, function () {
istrue = true;
})
} else {
console.log(e.wheelDelta)
var pageh = document.body.scrollTop + window.innerHeight;
var maxh = wrap.offsetHeight - window.innerHeight;
pageh = pageh > maxh ? maxh : pageh;
index = pageh / window.innerHeight;
for (var i = 0; i < pagelength; i++) {
page[i].classList.remove('active')
}
page[index].classList.add('active')
animation(document.body, {
'scrollTop': pageh
}, function () {
istrue = true;
})
}
}
}
function animation(obj, json, fn) {
clearInterval(obj.timer);
//表示运动是否都已经停止
var flag = true;
obj.timer = setInterval(function () {
//循环json
for (var i in json) {
if (i == 'opacity') {
//获取透明度值，round四舍五入去除小数点
var icur = Math.round(parseFloat(getStyle(obj, i)) * 100);
} else {
//获取属性值
var icur = parseInt(getStyle(obj, i)) || obj[i];
}
//缓冲运动，speed随时变换
var speed = (json[i] - icur) / 10; //千万要写在定时器里面，写在外面会有意想不到的后果
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度向上或者下取整，防止到不了over位置
//如果有一个没到达终点就是false
if (json[i] !== icur) {
flag = false;
} else {
flag = true;
}
if (i == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')'; //IE兼容
obj.style.opacity = (icur + speed) / 100;
} else if (obj[i] || obj[i] == 0) {
obj[i] = icur + speed;
} else {
obj.style[i] = icur + speed + 'px';
}
// console.log(icur + ' ' + json[i]);
}
//检查是否所有的运动都已经停止
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 13);
}
/**
*函数作用：返回样式属性值
*接受参数：obj（需要获取属性的DOM元素）
* attr（需要获取的属性名称）
*/
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]; //IE兼容
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</body>
</html>

原生js实现简单的全屏滚动的更多相关文章

  1. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  2. jQuery+fullPage.js演示10种全屏滚动

    基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...

  3. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

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

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

  5. FullPage.js 活动单页 - 全屏滚动插件

    插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. https://www.uedsc.com/fullpage.html 官网 如今我们经常能 ...

  6. 自己用js实现全屏滚动

    参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...

  7. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  8. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  9. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

随机推荐

  1. Python多进程----从入门到放弃

    Python多进程 (所有只写如何起多进程跑数据,多进程数据汇总处理不提的都是耍流氓,恩,就这么任性) (1)进程间数据问题,因为多进程是完全copy出的子进程,具有独立的单元,数据存储就是问题了 ( ...

  2. NLP+语义分析（四）︱中文语义分析研究现状（CIPS2016、角色标注、篇章分析）

    摘录自:CIPS2016 中文信息处理报告<第二章 语义分析研究进展. 现状及趋势>P14 CIPS2016> 中文信息处理报告下载链接:http://cips-upload.bj. ...

  3. 5.4 TLP中与数据负载相关的参数

    在PCIe总线中,有些TLP含有Data Payload,如存储器写请求.存储器读完成TLP等.在PCIe总线中,TLP含有的Data Payload大小与Max_Payload_Size.Max_R ...

  4. Java中的换行符

    Java中的换行符 PrintWriter out = response.getWriter(); out.write("\r\n"); Java中的换行符"\r\n&q ...

  5. 配置JBoss环境变量

    配置JBoss环境变量 1.单击"计算机"右键,选中"属性" 2.找到"高级系统设置",并且单击,会弹出一个窗口 3.选择"高级- ...

  6. Flex中单选按钮控制表格中的列的增加或减少

    1.问题背景 单选按钮有"苹果"和"香蕉"两个,表格中的列有星期.苹果.香蕉和苹果比率,选择了"苹果"单选按钮,表格显示星期.苹果和苹果比率 ...

  7. pat1061-1070

    1061 我想吐槽这题的题意不够清楚,不过下次得长记性,对于模糊的题意要大胆猜测,而不是固执己见 #include<iostream> #include<cstdio> #in ...

  8. Carries SCU - 4437

    Carries frog has nn integers a1,a2,-,ana1,a2,-,an, and she wants to add them pairwise. Unfortunately ...

  9. 浏览器之window对象--javascript

    window对象代表打开的浏览器窗口,是Web浏览器所有内容的主容器.window对象是整个对象链条结构的最高层,是其他对象的父对象,在调用window对象的方法和属性时,可以省略window对象的引 ...

  10. 【JDK1.8】JUC.Lock综述

    一.前言 前段时间结束了jdk1.8集合框架的源码阅读,在过年的这段时间里,一直在准备JUC(java.util.concurrent)的源码阅读.平时接触的并发场景开发并不很多,但是有网络的地方,就 ...