php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法

这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。

前言

单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，本文实现的效果类似于fullpage的单屏滚动，使用原生JS实现，不依赖任何js库；

css代码：

html,body {height:100%;}

body {margin:0px;}

p {height:100%;}

html代码:

js代码:

document.addEventListener("DOMContentLoaded", function() {

var body = document.body,

html = document.documentElement;

var itv, height = document.body.offsetHeight;

var page = scrollTop() / height | 0;

//窗口大小改变事件

addEventListener("resize", onresize, false);

onresize();

//滚轮事件

document.body.addEventListener(

"onwheel" in document ? "wheel" : "mousewheel",

function(e) {

clearTimeout(itv);

itv = setTimeout(function() {

var delta = e.wheelDelta / 120 || -e.deltaY / 3;

page -= delta;

var max = (document.body.scrollHeight / height | 0) - 1;

if (page < 0) return page = 0;

if (page > max) return page = max;

move();

}, 100);

e.preventDefault();

}

);

//平滑滚动

function move() {

var value = height * page;

var diff = scrollTop() - value;

(function callee() {

diff = diff / 1.2 | 0;

scrollTop(value + diff);

if (diff) itv = setTimeout(callee, 16);

})();

};

//resize事件

function onresize() {

height = body.offsetHeight;

move();

};

//获取或设置scrollTop

function scrollTop(v) {

if (v == null) return Math.max(body.scrollTop, html.scrollTop);

else body.scrollTop = html.scrollTop = v;

};

});

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法相关推荐

HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
新版第三方橘子/威客接单系统网站源码+有充值API接口
正文: 由于标题太长,所以本文简略写了,下方是完整标题: 分享一个威客任务平台源码,桔子威客整站源码可运营,任务主可以直接在线发布相关任务. 程序: wwrgs.lanzouw.com/ijl9X07 ...
最新第三方橘子/威客接单系统网站源码+有充值API
正文: 由于标题太长,所以本文简略写了,下方是完整标题: 分享一个威客任务平台源码,桔子威客整站源码可运营,任务主可以直接在线发布相关任务. 程序: wegwu.lanzouw.com/iExYd06 ...
3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体原生 JS 实现 3D 立方体 ...
动漫网站-前端网页技术精美网站源码HTML+CSS+JS
微信公众号:创享日记发送:动漫网站获取完整源码(打开即可用) 效果图①主页首页效果图②作品列表展示页效果图③作品详情展示页效果图④联系我们效果图⑤博客列表效果图⑥博客详情效果图⑦其它 ...
找了很多导航网站源码，最后选择了它，极简单页导航-茶余饭后导航
一直都想弄个导航网站,看别人都弄得很好,想找源码有些又找不到,最后就搞个简简单单的导航吧,名字也简单点,就叫茶余饭后导航茶余饭后导航,地址:https://guide.qitablog.com/ 源 ...
公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
微信公众号:创享日记发送:产品网页获取完整源码(打开即可用) 效果①主页首页 /*========================================================= ...
DEDE单本小说网站源码[无错版]
DEDE单本小说网站源码 PHP单本小说源码无错版这是2013-9-17最新更新的DEDE单本小说网站源码,本人手动用PHP写的,绝对不是广告今天给大家分享织梦DEDE单本小说网站,最近好多人貌 ...
HTML5期末大作业：网站——美丽家乡(南京介绍7个页面) 家乡文化介绍学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...

php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法

php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法相关推荐

最新文章

热门文章