单页切屏效果的原理

简介: 1.实现过程中的注意事项:鼠标滚轮事件的兼容性问题: W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,FireFox用了一个私有实现DOMMouseScroll。其他浏览器都是用mousewheel实现,所以需要做一下兼容处理(详见下面的js关键代码的截图)

单页切屏效果的原理



前言


在实际的开发过程中碰到的单页切屏效果,稍作改动,就可以做成如下优雅的幻灯片效果了。


20180112082231038.gif


原理


文档结构如下,监测鼠标滚轮的滚动事件,相应的执行切屏动画。


20180112082409181.png


1.实现过程中的注意事项:


鼠标滚轮事件的兼容性问题:


W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,FireFox用了一个私有实现DOMMouseScroll。其他浏览器都是用mousewheel实现,所以需要做一下兼容处理(详见下面的js关键代码的截图)


20180112082604828.png


2.切屏幻灯片效果是通过“background-attachment: fixed;”实现的,如果不想要幻灯片效果,只是单纯的切屏,把“background-attachment: fixed;”去掉即可。


代码


html:


20180112082814614.png


css:


20180112082841341.png


js关键代码:


滚轮事件:


20180112082920676.png


切屏函数:


20180112083003677.png


参考

http://www.webfront-js.com/articaldetail/17.html

http://www.webfront-js.com/articaldetail/18.html


附件

完整代码见我的github:

https://github.com/pluscai/my-fullpage#my-fullpage


目录
相关文章
|
3月前
|
数据采集 JavaScript 前端开发
Vue面试题二】、说说你对SPA (单页应用) 的理解?
这篇文章详细介绍了单页应用(SPA)的概念、与多页应用(MPA)的区别、SPA的优缺点,并提供了实现SPA的基本方法和为SPA应用进行搜索引擎优化(SEO)的几种策略。
Vue面试题二】、说说你对SPA (单页应用) 的理解?
|
1月前
|
前端开发 JavaScript 搜索推荐
|
2月前
实现一个简单的单页应用
实现一个简单的单页应用
|
6月前
|
前端开发 JavaScript 开发者
探究单页应用(SPA)与多页应用(MPA):技术的选择与对比
在当今快节奏的互联网时代,单页应用(SPA)和多页应用(MPA)是两种常见的前端开发架构。本文将深入探讨这两种应用类型的特点、优势和不足,并提供一些帮助开发者做出选择的指导。
|
6月前
单页404源码
单页404源码
85 4
单页404源码
|
6月前
|
前端开发 JavaScript 搜索推荐
【专栏】比较单页应用(SPA)与多页应用(MPA)的优缺点
【4月更文挑战第28天】本文比较了单页应用(SPA)与多页应用(MPA)的优缺点。SPA以其动态加载、流畅体验和前后端分离受到青睐,尤其适合现代JavaScript框架。而MPA因其传统架构、SEO友好和浏览器兼容性而占优势。选择SPA或MPA应考虑项目需求、团队技能、项目规模及预算,以平衡用户体验、开发效率和兼容性,确保项目目标的实现。
206 0
|
6月前
|
数据安全/隐私保护
短视频解析单页源码
这个一个网页html解析短视频无水印视频的源码,电脑直接打开也可以本地使用,也可以上传到网站搭建成网页使用。
139 1
|
6月前
|
缓存 前端开发 JavaScript
单页应用如何提高加载速度?
提高单页应用(Single Page Application,SPA)的加载速度可以从以下几个方面入手:
60 1
|
存储 JavaScript 前端开发
浅谈前端框架原理
浅谈前端框架原理
150 0
|
SQL XML 搜索推荐
SpringDataA和Mybaits有什么区别,如何使用?
阿粉之前一直都是使用传统的SSM进行开发,也就我们所说的 Spring,SpringMVC,Mybatis,即使使用的SpringBoot,无非也就是这么集中,对于持久层框架的选择,也都是Mybaits,但是阿粉无意中发现,现在使用SpringDataJPA的公司也是非常的多的,所以,今天阿粉来讲一下这个SpringDataJPA.
SpringDataA和Mybaits有什么区别,如何使用?