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 ...
随机推荐
- Azure 数据库中文乱码的问题
1,创建数据库的时候记得选择中文的 2,更新中文的时候记得加上N
- koch曲线与koch雪花的MATLAB实现
代码 % -- function koch(Ax, Ay, Bx, By) % 控制递归深度 Deepth = ; % 控制图画大小 Size = ; + (By-Ay)^) < Deepth ...
- eclipse+SVN文件只显示版本号，不显示时间和作者解决办法
SVN默认是显示提交次数的 改成这样 就可以了...
- hihoCoder #1379 Emulator
hihoCoder Challenge 23, Prob. A 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 有一个\(n\)个点的无向正权图\(G\),这个图是连通的, ...
- 使用IntelliJ IDEA和Maven构建Java web项目并打包部署
爱编程爱分享,原创文章,转载请注明出处,谢谢! http://www.cnblogs.com/fozero/p/6120375.html 一.背景 现在越来越多的人使用IntelliJ IDEA工具进 ...
- UML活动图与流程图的区别
http://blog.chinaunix.net/uid-11572501-id-3847592.html UML活动图与流程图的区别 (1).流程图着重描述处理过程,它的主要控制结构是顺序.分支和 ...
- javascript之简单的选择排序法
基本思想: 比对数组中元素,相等者输出元素在数组的下标,否则就输出没找到! 代码如下: function Orderseach(array,findVal){ var temp = false; // ...
- C#------EntityFramework实体加载数据库SQLServer(MySQL)
一.SQLServer数据库创建表Company,包含ID,CName,IsEnabled三列 二.(1)VS新建一个DXApplication工程,名为CompanyManageSystem (2) ...
- 如何在命令行模式下查看Python帮助文档---dir、help、__doc__
如何在命令行模式下查看Python帮助文档---dir.help.__doc__ 1.dir函数式可以查看对象的属性,使用方法很简单,举str类型为例,在Python命令窗口输入 dir(str) 即 ...
- 入门：PHP:hello world!
<?php echo 'hello'."\n"." world!"."good night!";//2016.09.18 22:57? ...