由于个人能力，研究了两天，终于写出来了。

又花了一天的时间成功的将30多行脚本，改成了70多行，我也是够有心的了。

那么接下来就是我制作这个效果的全部过程。

那一年我十七，她十八，在那个夏天里，我们，，，，，扯远了！

第一就是JQuery没有获得鼠标滚动方向的方法，有一个插件是可以实现的【jQuery Mousewheel Plugin】
,用插件写就没有意思了，于是就NB哄哄的google了一下，写了一个兼容IE/ff等等的时间监听的方法。如下

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

其它的脚本写的可能不是最优质的，但是重点突出的是我画红框的那个段脚本；

重点就是，如何将30多行脚本改成70多行。如图：

分解所有的重用脚本为一个函数，理性与尿性的IF嵌套循环判断。
这就是我一个集帅气与智慧的完美作品。 我这么低调不知道是不是会迎来掌声！

fullPage 全屏滚动【上下滚动】效果的更多相关文章

  1. fullpage 全屏插件

     fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...

  2. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  3. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  4. fullPage全屏滚动的实现

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...

  5. 如何在Android中实现全屏，去掉标题栏效果

    在进行Android UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置.   1.在xml文件中进行配置   在项目的清单文件A ...

  6. jquery.fullpage 全屏滚动

    参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...

  7. 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  8. fullPage全屏高度自适应

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Swiper 移动端全屏轮播图效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. dotnet文件操作

    /// <summary> /// 创建文件夹 /// </summary> /// <param name="sender"></par ...

  2. C# winform窗体设计-通过条件查询数据

    在winform 数据库设计中,有时候需要通过条件查询对应的数据,并且将数据显示在文本框(or 富文本框)中,下面,小编将讲述通过一个条件: 首先,我们需要对数据库建立连接,并且执行数据库命令,在此之 ...

  3. Bzoj2007 [Noi2010]海拔

    Time Limit: 20 Sec  Memory Limit: 552 MB Submit: 2380  Solved: 1130 Description YT市是一个规划良好的城市,城市被东西向 ...

  4. [NOIP2014] 提高组 洛谷P1941 飞扬的小鸟

    题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便 ...

  5. COGS103&tyvj1899 [NOIP2002]矩形覆盖

    题目里给的范围是k<=4,但是官方数据并没有k==4的情况,导致一些奇奇怪怪的DP写法也能过.听说标程在k==4的时候有反例,掀桌-.. 难怪COGS上k==4的数据答案是错的. 还是好好写个搜 ...

  6. C#位操作与枚举的应用

    看到代码里有用位操作来判断条件的,以前没有这么用过,做个笔记: int add = 2; int modify = 4; int delete = 8; Console.WriteLine((add ...

  7. .bash_profile for mac‘ envionment variables

    A typical install of OS X won't create a .bash_profile for you. When you want to run functions from ...

  8. 【Beta】第二次任务发布

    后端 了解社区新建文章.添加评论(回复)的机制.整理成API文档,包括如何请求新建文章.新建评论(回复).如何获取文章内容和评论内容. 验收条件:文档PM要能看懂. 前端 微调数据输入部分的布局和操作 ...

  9. 精通javascript（看书笔记）

    变量的类型检查 //检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断 ...

  10. 设计模式-14 MVC模式

    一 MVC设计模式 MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式,它是一个存在于服务器 表达层的模型,它将应用分开,改变应用之间的高度耦合 MVC设计模式将 ...