fullPage 全屏滚动【上下滚动】效果
由于个人能力,研究了两天,终于写出来了。
又花了一天的时间成功的将30多行脚本,改成了70多行,我也是够有心的了。
那么接下来就是我制作这个效果的全部过程。
那一年我十七,她十八,在那个夏天里,我们,,,,,扯远了!
第一就是JQuery没有获得鼠标滚动方向的方法,有一个插件是可以实现的【jQuery Mousewheel Plugin】
,用插件写就没有意思了,于是就NB哄哄的google了一下,写了一个兼容IE/ff等等的时间监听的方法。如下

接下来就是获得鼠标的滚动方向了,话不多说直接上脚本;

其它的脚本写的可能不是最优质的,但是重点突出的是我画红框的那个段脚本;
重点就是,如何将30多行脚本改成70多行。如图:

分解所有的重用脚本为一个函数,理性与尿性的IF嵌套循环判断。
这就是我一个集帅气与智慧的完美作品。 我这么低调不知道是不是会迎来掌声!
fullPage 全屏滚动【上下滚动】效果的更多相关文章
- fullpage 全屏插件
fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
- fullPage全屏滚动的实现
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...
- 如何在Android中实现全屏,去掉标题栏效果
在进行Android UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件A ...
- jquery.fullpage 全屏滚动
参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...
- 杠杠做的全屏随鼠标滚动显示图片,类似于PPT效果
图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...
- fullPage全屏高度自适应
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Swiper 移动端全屏轮播图效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- 洛谷P3128 [USACO15DEC]最大流Max Flow [树链剖分]
题目描述 Farmer John has installed a new system of pipes to transport milk between the stalls in his b ...
- ObjC 巧用反射和KVC实现JSON快速反序列化成对象
1.简单的KVC介绍 KVC是一种间接访问对象属性的机制,不直接调用getter 和 setter方法,而使用valueForKey 来替代getter 方法,setValue:forKey来代替se ...
- 分析python程序运行时间的几种方法
最早见过手写的,类似于下面这种: 1 import datetime 2 3 def time_1(): 4 begin = datetime.datetime.now() 5 sum = 0 6 f ...
- iOS自动处理键盘事件的第三方库:IQKeyboardManager
我们写界面要考虑很多用户体验问题,键盘事件的响应就是比较麻烦的一种.我们需要监听键盘事件,考虑点击背景收起键盘.考虑键盘遮挡输入框问题等等,而且每个界面都要做这么一套.这个库帮我们解决了这个事情. 这 ...
- iOS 获得当前经纬度和城市
1.引入CoreLocation.framework,#import <CoreLocation/CoreLocation.h>,添加委托CLLocationManagerDelegate ...
- PL/0编译器(java version) – Scanner.java
1: package compiler; 2: 3: import java.io.BufferedReader; 4: import java.io.FileNotFoundException; ...
- Nginx个人简单理解
首先我们来补充下一些基本知识: 什么是代理服务器? 先举个简单的例子,现在我们在百度访问谷歌的网站,发现现在进不去,这个时候我们可以FQ(关于FQ,可以借鉴下这个博文:http://zhangge.n ...
- 从Paxos到ZooKeeper-四、ZooKeeper技术内幕
本文将从系统模型.序列化与协议.客户端工作原理.会话.服务端工作原理以及数据存储等方面来揭示ZooKeeper的技术内幕. 一.系统模型 1.1 数据模型 ZooKeeper的视图结构使用了其特有的& ...
- css006 文本格式化
css006 文本格式化 文本格式化:字体(font-family).颜色(color).字号(font-size). 行距(line-height).粗体(font-weight).斜体(font- ...
- CentOS7安装hive-2.1.0
环境: CentOS7 Hadoop-2.6.4,配置两个节点:master.slave1 mysql-server 过程: 下载.解压hive-2.1.0到/usr/hadoop-2.6.4/thi ...