单页切屏效果的原理

简介: 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


目录
相关文章
|
缓存 移动开发 关系型数据库
Linux 内存 占用较高问题排查
Linux 内存 占用较高问题排查
568 2
|
数据可视化 C++
msvc编译opencascade和vtk
1.opencascade源码 我下载的时候最新版本是7.7.0
487 0
|
消息中间件 缓存 监控
Kafka中的Controller(控制器)节点
Kafka中的Controller(控制器)节点
1526 0
Kafka中的Controller(控制器)节点
|
Ubuntu Linux 应用服务中间件
在Linux中,如何管理服务的自启动?
在Linux中,如何管理服务的自启动?
|
网络协议 Ubuntu 前端开发
好好的容器突然起不来,经定位是容器内无法访问外网了?测试又说没改网络配置,该如何定位网络问题
本文记录了一次解决前端应用集成到主应用后出现502错误的问题。通过与测试人员的沟通,最终发现是DNS配置问题导致的。文章详细描述了问题的背景、沟通过程、解决方案,并总结了相关知识点和经验教训,帮助读者学习如何分析和定位网络问题。
620 1
WK
|
算法
粒子群算法的优缺点分别是什么
粒子群优化(PSO)算法概念简单,易于编程实现,参数少,收敛速度快,全局搜索能力强,并行处理高效。然而,它也容易陷入局部最优,参数设置敏感,缺乏坚实的理论基础,且性能依赖初始种群分布,有时会出现早熟收敛。实际应用中需根据具体问题调整参数以最大化优势。
WK
1904 3
|
Java API 开发者
针对Java开发者的RESTful API设计与实现指南
本文是一份针对Java开发者的RESTful API设计与实现指南。RESTful API采用表述性状态转移(REST)架构风格,提供无状态、统一接口的服务。在Java中,可通过Spring Boot框架快速构建RESTful API,利用Spring MVC处理HTTP请求,并支持数据绑定、验证及异常处理等功能。此外,还介绍了版本控制、安全性加强、文档编写与测试等最佳实践,帮助开发者打造高性能且可靠的API服务。
342 0
|
机器学习/深度学习 监控 安全
IDS 和 IPS 的区别详解
【8月更文挑战第31天】
1542 0
|
消息中间件 分布式计算 DataWorks
DataWorks常见问题之sap haha数据同步kafka如何解决
DataWorks是阿里云提供的一站式大数据开发与管理平台,支持数据集成、数据开发、数据治理等功能;在本汇总中,我们梳理了DataWorks产品在使用过程中经常遇到的问题及解答,以助用户在数据处理和分析工作中提高效率,降低难度。
405 6
|
人工智能 关系型数据库 MySQL
Linux | MySQL安装Workbench图形化
Linux | MySQL安装Workbench图形化