<!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里推荐使用多进程而不是多线程

    转载  http://bbs.51cto.com/thread-1349105-1.html 最近在看Python的多线程,经常我们会听到老手说:"Python下多线程是鸡肋,推荐使用多进程 ...

  2. OpenStack Ironic 常见问题

    whole disk和partition 镜像 whole disk镜像部署可以支持windows,但是不能自定义分区(可以通过cloud-init实现),分区表是做镜像的人确定好的,partitio ...

  3. Cramfs、JFFS2、YAFFS2全面对比

     由 于嵌入式系统自身存在一些特殊要求使得一些传 统的文件系统 (如FAT.EXT2等) 并不十分适合.专 用的嵌入式文件系统应有一些自身的特性如文件系统 面对的储存介质特殊性.文件系统应具有的跨 ...

  4. SystemVerilog语言简介(一)

    1. 接口(Interface) Verilog模块之间的连接是通过模块端口进行的.为了给组成设计的各个模块定义端口,我们必须对期望的硬件设计有一个详细的认识.不幸的是,在设计的早期,我们很难把握设计 ...

  5. sudo:无法解析主机 解决方案

    你如果电脑中没有vim,用gedit也可以. 打开文件以后,将其中的 127.0.1.1  xxxxx xxx 替换成你电脑的自己的名字即可.

  6. Oracle 存储过程中的 =>

    oracle实参与形参有两种对应方式1.一种是位置方式,和面向对象语言参数传递类似;2.另外一种是=> 作为形参对应,因为位置对应方法有缺限,比如一个函数有3个参数,但第2个是可以不传(有默认值 ...

  7. MyEclipse10中配置WebLogic10

    MyEclipse10中配置WebLogic10 1.双击打开MyEclipse10,依次操作"Window--->Preferences" 2.在左侧菜单中找到" ...

  8. 让微信，qq，uc浏览器使用全屏模式，全屏模式里，浏览器是不会上下左右滑动出现背景的

    <meta name="x5-fullscreen" content="true"> <meta name="full-screen ...

  9. spring的PathVariable和value={}小技巧（shiro项目中来的三）

    <property name="successUrl" value="/main/index" /> @RequestMapping(value=& ...

  10. httpclient案例二（调用百度地图的接口）

    一,class T package com.http.test; import org.junit.Test; import com.http.BaiduMapProxyService; import ...