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

又花了一天的时间成功的将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. ng-if else的使用

    <!DOCTYPE html> <html> <head> <script src="http://code.angularjs.org/1.2.0 ...

  2. SQL Server发布订阅功能研究

    前提: 发布订阅只能是同一个内网的机器上才能使用,其实这个可以用配置管理器的别名功能设置之后就可以了,外网的也能通过这样的方式来搞. 配置过程参考老D的文章:http://www.cnblogs.co ...

  3. Python简介及环境部署

    Python的由来:         Python的创始人:Guido van Rossum Guido 在1989年12月时,寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构 ...

  4. 蓝牙(Bluetooth) IEEE 802.15.1 协议学习

    catalogue . 蓝牙概念 . 配对和连接 . 机密安全性 . 蓝牙协议分类 . 蓝牙协议栈 1. 蓝牙概念 蓝牙(Bluetooth)是一种无线技术标准,可实现固定设备.移动设备和楼宇个人域网 ...

  5. C#产生随机颜色

    在.net Framework中提供了一个专门用来产生随机数的类System.Random.C#可以用Random产生随机的R.G.B值,从而生成随机的颜色. 对于随机数,计算机不可能产生完全随机的数 ...

  6. AC 自动机

    AC自动机(Aho-Corasick Automata)是经典的多模式匹配算法.从前我学过这个算法,但理解的不深刻,现在已经十分不明了了.现在发觉自己对大部分算法的掌握都有问题,决定重写一系列博客把学 ...

  7. 捉襟见肘之自定义自拍相机AVFoundation

    因为上篇的问题的,我搜索到解决方法: http://stackoverflow.com/questions/5427656/ios-uiimagepickercontroller-result-ima ...

  8. javascript 字符串加密的几种方法

    8进制 /*8进制加密*/ function EnEight(){ var monyer = new Array();var i,s; for(i=0;i<txt.value.length;i+ ...

  9. BZOJ4445: [Scoi2015]小凸想跑步

    裸半平面交. 记得把P0P1表示的半平面加进去,否则点可能在多边形外. #include<bits/stdc++.h> #define N 100009 using namespace s ...

  10. js切换实现背景颜色

    <script type="text/javascript"> obj=document.getElementsByTagName('h1'); ;i<obj.l ...