<!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. Centos搭建mysql/Hadoop/Hive/Hbase/Sqoop/Pig

    目录: 准备工作 Centos安装 mysql Centos安装Hadoop Centos安装hive JDBC远程连接Hive Hbase和hive整合 Centos安装Hbase 准备工作: 配置 ...

  2. 嵌入式Linux引导过程之1.1——Xloader的xloader.lds

    本文中的所有代码版本都是基于ST的SpearPlus开发板的. xloader是在系统上电之后,执行完ROM中的frimware后最先开始执行的用户程序,它的体积很小,执行的功能也很简单,主要是对系统 ...

  3. 解决VC6下调不出MSDN的问题！

     原文:http://www.programfan.com/blog/article.asp?id=1524http://blog.programfan.com/trackback.asp?id=15 ...

  4. 一句Python，一句R︱数据的合并、分组、排序、翻转

    先学了R,最近刚刚上手python,所以想着将python和R结合起来互相对比来更好理解python.最好就是一句python,对应写一句R. python中的numpy模块相当于R中的matirx矩 ...

  5. U-Boot启动过程

    开发板上电后,执行U-Boot的第一条指令,然后顺序执行U-Boot启动函数.看一下board/smdk2410/u-boot.lds这个链接脚本,可以知道目标程序的各部分链接顺序.第一个要链接的是c ...

  6. freemarker报错之四

    1.错误描述 五月 28, 2014 9:56:48 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proce ...

  7. 芝麻HTTP:Python爬虫入门之URLError异常处理

    1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的服务器 服务器不存在 在代码中,我们需要用try-except语句来包围并捕获相应的异常.下 ...

  8. Hibernate【映射】知识要点

    前言 前面的我们使用的是一个表的操作,但我们实际的开发中不可能只使用一个表的...因此,本博文主要讲解关联映射 集合映射 需求分析:当用户购买商品,用户可能有多个地址. 数据库表 我们一般如下图一样设 ...

  9. CF Educational Round 23 F.MEX Queries

    写了3小时 = =.这两天堕落了,昨天也刷了一晚上hihocoder比赛,还爆了零.之后得节制点了,好好准备考研.. 首先很容易想到 压缩数据 + 线段树 然后对于Pushdown真很难写..需要牵涉 ...

  10. CF AIM Tech Round 3 (Div. 2) D - Recover the String

    模拟 首先可以求出 0 和 1 的个数 之后按照01 10 的个数贪心安排 细节太多 错的都要哭了 #include<bits/stdc++.h> using namespace std; ...