<!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. mybatis与spring的整合(使用接口实现crud)

    本人刚刚接触mybatis,今天把它和spring整合起来用了一个上午==. 一开始是通过配置文件来配置,后来尝试用了一下注解,觉得mybatis的注解真的有点恶心...一大坨的,所以我还是建议使用配 ...

  2. C#访问修饰符(public,private,protected,internal,sealed,abstract)

    为了控件C#中的对象的访问权限,定义对象时可以在前面添加修饰符. 修饰符有五种:private(私有的),protected(受保护的),internal(程序集内部的),public(公开的),以及 ...

  3. 不解，排名靠前那么多的人为什么抄袭我的activit博文？？

    刚才也是无意搜了下自己的最近发表的activiti系列博文,无意中发现居然在别人的csdn博客中也成了原创. ......

  4. freemarker嵌入文件输出结果

    freemarker嵌入文件输出结果 1.嵌入的文件代码 inc.ftl: <#assign username="李思思"> 2.父文件代码 inner.ftl: &l ...

  5. Duplicate entry '97112' for key 1

    1.错误描述 2014-07-08 10:27:13,939 ERROR(com.you.conn.JDBCConnection:104) -com.mysql.jdbc.exceptions.jdb ...

  6. Caused by: java.lang.ClassNotFoundException: com.mchange.v2.ser.Indirector

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  7. INS-30002 口令和确认口令不同

    1.错误描述 2.错误原因 由截图上的提示,可以看出是管理口令和确认口令不一致 3.解决办法 重新输入密码

  8. SQL错误：ORA-12899

    1.错误描述 SQL错误:ORA-12899:列"USER"."T_USER_TAB"."USER_ID"的值太大(实际值:4,最大值:2) ...

  9. asp.net mvc razor布局页中a标签的href的跳转问题

    笔者做了一个文件上传系统,文件上传后,保存在wwwroot目录的file文件夹中,并把该文件的路径保存到数据库中, 如这样的一个路径保存在数据库: file/b775f487-0127-41e0-9d ...

  10. 《Master Bitcoin》学习笔记01

    前言 关于比特币入门,其运行原理(理解性描述),什么是挖矿,还有一些学习资料的整理,详见此博客链接 第一章讲比特币的历史,算是导入,上面的博客链接有概括. 第二章举了使用比特币交易的例子,其中介绍了一 ...