想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，

想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者更好的建议，请大家评论，一同探讨，

好了废话不多说，下面开始干活了！

　　首先，说一下我想实现的基本功能：

　　　　此方法需要有2个基本形参，，一个是我要监测的标签a，另一个是我要监测标签相对于哪个标签b做的距离检测。

　　当a和b的距离达到一定范围的时候，让网页局部发生一些变化效果，这是我们的预期。

　　以下是我的方法的框架：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            div{

                width: 200px;

                height: 200px;

                margin-top: 20px;

            }

            #a1{

                background-color: red;

            }

            #a2{

                background-color: blue;

            }

            #a2 .a22{

                width: 50px;

                height: 50px;

                background-color: navajowhite;

                position: relative;

                top: 50px;

                left: -50px;

            }

            #a3{

                background-color: yellow;

            }

        </style>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body>

          <div id="a1"></div>

          <div id="a2">

              <div class="a22">haha</div>

          </div>

          <div id="a3"></div>

          <div id="a3"></div>

    </body>

    <script language="JavaScript" src="js/jquery-1.10.2.min.js"></script>

    <script language="JavaScript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

        /*以下是我们以监测目标元素距离body顶部距离的方法*/

        function myScrollFn($myElement1,$myElement2){

            $(window).scroll(function(){         //这是scroll方法，窗口滚动时就会被调用

                var a=$myElement1.scrollTop();   //这是监测滚动条距离顶端的距离

                var b=$myElement2.offset().top;   //这是监测我们目标元素距离body或者其第一个定位父元素顶端的距离

                /*当div #a2距离窗口顶部距离在0px到200像素时，div .a22出现*/

                if (b-a<=0&&b-a>=-200) {

                    $(".a22").css({"left":"20px","transition":"all 1s"});

                }else{

                    $(".a22").css({"left":"-50px","transition":"all 0s"});

                }

                console.log(b-a);   //为便于观察，在控制台打印出距离来

            });

        }

        myScrollFn($("body"),$("#a2"));

    </script>

</html>

　　上述代码功能：当窗口上沿在达蓝色div内部时，小div从左侧出现，不在时恢复原状。

　　这里先普及一下基础知识，

　　　　.scrollTop(); 是监测滚动条距离顶端的距离的，这是JQuery方法

　　　 .offset().top   是监测我们目标元素距离body或者其第一个定位父元素顶端的距离这也是JQuery方法及属性

　　　　同样在HTML5中、js中也都有这些属性方法的定义和详解，有兴趣的可以去查看帮助文档。

　　那按照以上结构就可以比较轻松的实现检测距离实现一定动画效果，只需要在if判断书写你想要变化的代码即可，如果想实现

每次到达设定区间都执行动画，可以像例子中一般，在else中设置重置我们的修改的样式即可。

　　写到这的时候，突然想到，我们网页中常用的那些，网页滚动产生的视觉差效果，他是不是也可以用这个来做一个方法呢！

　　下面请看这个简易的demo：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .container{

                position: relative;

                height: 3000px;

                padding-top: 400px;

                background-color: gainsboro;

            }

            .a1{

                width: 300px;

                height: 300px;

                background-image: url(img/FqYgq95pkXU2iGax9iYPaxRnt1Xl.png);

                background-size: 100%;

                position: absolute;

            }

            .a2{

                width: 200px;

                height: 100px;

                background-color: yellow;

                position: absolute;

                margin-left: 50px;

            }

        </style>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body>

          <div class="container">

              <div class="a1"></div>

              <div class="a2"></div>

          </div>

    </body>

    <script language="JavaScript" src="js/jquery-1.10.2.min.js"></script>

    <script language="JavaScript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

        /*编写一个简单的方法,实现网页常见常见的视觉差效果*/

        function myEye($myElement1,$myElement2){

            var num=1;

            $(window).scroll(function(){

                var a=$("body").scrollTop();       //取出滚动条离窗口顶端的距离

                var yellow=$myElement2.offset().top;  //取出黄色div块离body最上方的距离

                var c=yellow-a+0.5;                //计算出比滚动条滚动速度慢一倍的数值

                $myElement1.css({"top":+c+"px"});     //设置黄色div的慢一倍的移动速度，产生视觉差效果

            })

        }

        myEye($(".a1"),$(".a2"));

    </script>

</html>

　　两个参数，可以设置成需要产生视觉差的2个元素节点，当然这里做的是demo，多加一些形参也都是可以的，看具体的网页需求了。

注意这里做实参的元素节点都是通过绝对定位实现的。通过   c=yellow-a+0.5;$myElement1.css({"top":+c+"px"});  这两句代码

可以实现2个块滚动速度差一倍，如果要改变相差的速度，只需要修改 c=yellow-a+0.5;这个式子就可以了，这个浏览器滚动条的精度，

我们暂且以1px来算（这个不同设备好像是不同的，博主不是很了解），但是以1像素来计算，通过加减0-1之间的数值，可以实现任意

速度比的视觉差，按照这个结构，修改起来还是很容易的。

　　以上内容纯属博主无聊，一个人乱搞的产物，如果有bug，希望导游们能够指出，我们共同探讨。个人感觉还是蛮实用的，比直接应

用插件灵活性高，代码量也少很多。

原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）的更多相关文章

  1. JavaScript之事件委托（附原生js和jQuery代码）

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  2. window.parent.document解决原生js或jQuery 实现父窗口的问题

    做WEB前端开发的过程中,经常会有这样的需求,用户点击[编辑]按钮,弹出一个对话框,在里边修改相应的值,然后把修改后的值显示在原页面,最后点击保存. 用window.parent.document.g ...

  3. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

  4. 【JS】怎样用原生JS实现jQuery的ready方法

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...

  5. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  6. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. onload事件与ready事件的区别，原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

  9. 原生js仿jquery一些常用方法

    原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   最近迷上了原 ...

随机推荐

  1. ICC_lab总结——ICC_lab2：设计规划

    PS:字丑,禁止转载!!! 首先先写出大概的流程,然后是一些教材的理论知识总结,最后是进行lab2的一些流程概述. 教材的理论知识总结主要是:数字集成电路物理设计学习总结--布图规划和布局 --> ...

  2. 用SSE指令计算点乘和累加

    void sse_mul_float:两段内存float数据点乘,结果覆盖第一组内存. float sse_acc_float:一组内存float值累加. 注: 1. 没有考虑中间的精确问题,结果会有 ...

  3. Linux-ubuntu安装过程讲解

    前言也不准备介绍Linux是什么,为什么要安装ubuntu?相信你能够看到这篇文章也知道自己想要做什么. 一,准备工具 1.VMwareWorkstation虚拟机 下载地址:https://my.v ...

  4. 获取JVM的dump文件

    获取JVM的dump文件的两种方式 1. JVM启动时增加两个参数: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: -XX ...

  5. XAMPP安装报错及解决

    FROM:http://www.zeeronsolutions.com/installing-xampp-on-windows-7-user-account-control-uac-warning-m ...

  6. Sql（in与exists）

    1.如果查询的两表大小相当,那么用in和exists差别不大,如果两个表中一个较小一个较大,则子查询表小的用exists,子查询表大的用in. 2.not in逻辑上不完全等同于not exists, ...

  7. loadrunner提高篇-block（块）技术和参数化

    Block(块)技术 block(块)技术是应用于在一个脚本中实现不同事务.不同次数循环或不同百分比循环的情况.比如在一个脚本中,登录执行3次,查询执行1次. 使用方法如下: 1.录制一个脚本,包含2 ...

  8. JQ实战一之烟花

    本次的效果大概为当用户点击网页时,网页下方弹出一个类似烟花的长条条,然后在桌面上散开以达成类似烟花的特效.话不多说先上图. 首先布局,布局很简单 <style> body { backgr ...

  9. instance 网卡是如何被拉起来的？- 每天5分钟玩转 OpenStack（172）

    instance 的网卡是如何被配置并拉起的?这是理解和用好 cloud-init 非常关键的一步.我们先讨论一个最简单基础的场景:镜像中没有安装 cloud-init. 此时 instance 启动 ...

  10. UILabel的讲解

    首先,我先自定义几个名词,方便接下来的讲解工作.如下图所示: 接下来,通过五个方面来讲解我们能对UILabel做出哪些改变或者称之为设置: 1.文字 1.1普通文字:内容text.字体大小font.字 ...