码迷,mamicode.com
首页 > Web开发 > 详细

原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)

时间:2017-05-01 22:12:12      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:实用   元素   蓝色   查看   offset   文档   形参   bug   标签   

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

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

好了废话不多说,下面开始干活了!

 

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

    此方法需要有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、滚动监听的妙用)

标签:实用   元素   蓝色   查看   offset   文档   形参   bug   标签   

原文地址:http://www.cnblogs.com/pengfei-nie/p/6792723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!