<!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. Kaggle新手入门之路

    学完了Coursera上Andrew Ng的Machine Learning后,迫不及待地想去参加一场Kaggle的比赛,却发现从理论到实践的转变实在是太困难了,在此记录学习过程. 一:安装Anaco ...

  2. linux清屏命令（clear，reset）

    (1)clear 这个命令将会刷新屏幕,本质上只是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之前的操作信息.一般都会用这个命令. (2)reset 这个命令将完全刷新终端屏幕,之前的终端输入 ...

  3. 浏览器兼容的JS写法总结

    一.元素查找问题 1. document.all[name]   (1)现有问题:Firefox不支持document.all[name]   (2)解决方法:使用getElementsByName( ...

  4. linux lvm管理扩展 RAID磁盘阵列管理

    LVM逻辑卷将多个物理分区/磁盘从逻辑上组合成一个更大的整体,从其中划分出不同的逻辑分区,逻辑分区的大小可以根据需要扩大,缩减!!!!/boot用来存放引导文件,不要基于LVM创建 PV(物理卷)物理 ...

  5. 决策树学习笔记（Decision Tree）

    什么是决策树? 决策树是一种基本的分类与回归方法.其主要有点事模型具有可得性,分类速度快.学习时,利用训练数据,根据损失函数最小化原则建立决策树模型:预测时,对新数据,利用决策树模型进行分类. 决策树 ...

  6. ORACLE 中NUMBER类型默认的精度和Scale问题

    在ORACLE数据库中,NUMBER(P,S)是最常见的数字类型,可以存放数据范围为10^-130~10^126(不包含此值),需要1~22字节(BYTE)不等的存储空间.P 是Precison的英文 ...

  7. Ubuntu16.04安装搜狗输入法后有黑边问题的解决方法

    apt-get install compton compton -b

  8. sea.js介绍

    网址:http://seajs.org/docs/ SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等Ja ...

  9. DirectX：在graph自动连线中加入自定义filter(graph中遍历filter)

    为客户提供的视频播放的filter的测试程序中,采用正向手动连接的方式(http://blog.csdn.net/mao0514/article/details/40535791),由于不同的视频压缩 ...

  10. JustMock .NET单元测试利器（二）JustMock基础

    JustMock API基础 Mock是Telerik®JustMock框架中的主要类.Mock用于创建实例和静态模拟,安排和验证行为. 本文将介绍 "Mock"的基本用法: 首先 ...