精华内容
下载资源
问答
  • 主要介绍了使用jQuery判断Div是否在可视区域的方法 判断div是否可见
  • "div在可视范围" );   }   });   });     <div style= "width:1px;height:2000px;" ></div>   <div id= "eq"   style= " width:100px; height:100px; background...
    <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html>
    <head>
         <title>js</title>
         <script src= "http://code.jquery.com/jquery-latest.js"  type= "text/javascript" ></script>
         <script type= "text/javascript" >
             $(document).ready( function  () {
                 $(window).scroll( function  () {
                     var  a = document.getElementById( "eq" ).offsetTop;
                     if  (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
                         alert( "div在可视范围" );
                     }
                 });
             });
         </script>
    </head>
    <body>
         <div style= "width:1px;height:2000px;" ></div>
         <div id= "eq"  style= " width:100px; height:100px; background-color:Red;" >1</div>
         <div style= "width:1px;height:2000px;" ></div>
    </body>
    </html>
    展开全文
  • 百度谷歌了挺多,但一直没有解决怎么判断div进入可视区域(就是再滚动,就得发出ajax请求,加载新图片了。) 1: 从浏览器到浏览器底部的距离(差不多是屏幕大小)。 2:滚动条顶部距离浏览器顶部的距离 3:这个div...
  • alert("div在可视范围"); } }); }); <div style="width:1px;height:2000px;"></div> <div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div> <div style="width:1px;height:...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>js</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(window).scroll(function () {
                    var a = document.getElementById("eq").offsetTop;
                    if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
                        alert("div在可视范围");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div style="width:1px;height:2000px;"></div>
        <div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
        <div style="width:1px;height:2000px;"></div>
    </body>
    </html>
    

      

    转载于:https://www.cnblogs.com/kevinge/p/3937084.html

    展开全文
  • div在可视范围 " ); } }); }); script > head > < body > < div style ="width:1px;height:2000px;" > div > < div id ="eq" style =" width:100px; height:100px; background-color:Red;" > 1 ...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>js</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(window).scroll(function () {
                    var a = document.getElementById("eq").offsetTop;
                    if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
                        alert("div在可视范围");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div style="width:1px;height:2000px;"></div>
        <div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
        <div style="width:1px;height:2000px;"></div>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/codinganytime/p/5193480.html

    展开全文
  • banner图在可视窗口内展示程度达到80%以上即触发一个事件(由于banner图是满屏宽,因此不需要考虑高度) 2.分析: 判断banner图何时不可见范围内 当banner图的底部线条可见区域下方超过20%即为不可见范围 当...

    1.需求:

    banner图在可视窗口内展示程度达到80%以上即触发一个事件(由于banner图是满屏宽,因此不需要考虑高度)

    2.分析:

    • 判断banner图何时不在可见范围内
      • 当banner图的底部线条在可见区域下方超过20%即为不在可见范围
      • 当banner图的顶部线条在可见区域上方超过20%即为不在可见范围

    3.代码实现:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          div {
            width: 100%;
            height: 200px;
            background: #1c65b9;
            margin-bottom: 10px;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
          }
          .banner {
            color: #ffe600;
            background: #dd1ca3;
          }
        </style>
      </head>
      <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div class="banner">6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <script type="text/javascript">
          var banner = document.querySelector(".banner");
          document.addEventListener("scroll", function () {
            var scope = (banner.offsetHeight * (100 - 80)) / 100; //广告栏可出线范围大小
            var cH = document.documentElement.clientHeight; //当前页面可见区域高度
            var tY = banner.getBoundingClientRect().top; //广告栏顶部到可见区域顶端的高度
            var bY = banner.getBoundingClientRect().bottom; //广告栏底部到可见区域顶端的高度
            // 需要考虑两种可能   当tY小于-scope则代表不在窗口展示   当bY大于cH+scope则代表不在窗口展示
            if (tY < -scope || bY > cH + scope) {
              console.log("不在可见范围内");
            } else {
              console.log("在可见范围内:", "触发事件");
            }
          });
        </script>
      </body>
    </html>
    
    展开全文
  • 且 *小于当前盒子到达顶部距离 与 当前盒子高度的和 *那么当前盒子就处于可视范围内 * */ if ( scrollTop >= tops && screenTop (tops + line_height)) { $('.el_topNav>div').eq(i).addClass('el_active').siblings...
  • "div在可视范围" );   }   });   });     <div style= "width:1px;height:2000px;" ></div>   <div id= "eq"   style= " width:100px; height:100...
  • 前言:最近工作中,有这样一个场景,判断一个元素是否滚动的可视区域内,不就固定到可视区域的上方。为了以后再次遇到,所以记录下来,并分享。转载请注明出处:...
  • 判断div是否在可视区内

    千次阅读 2015-09-20 21:31:25
    判断div是否在可视区内: (1)获取div相对于窗口的偏移量:document.Element.offsetTop; (2)获取窗口的高度:window.innerHeight; (3)获取文档滚动的高度:document.body.scrollTop; (4)如果(2...
  • js判断获取元素是否在可视区域

    千次阅读 2019-07-09 13:52:00
    js判断获取元素是否在可视区域 执行var ab = $(".nav_dh")[0]; isElementInViewport(ab) function isElementInViewport(el) { //获取元素是否在可视区域 var rect = el.getBoundingClientRect(); return ( ...
  • 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth...这里一次性做个总结,以用来判断元素是否在可视区域以及用原生js...
  • 判断一个div是否在可视范围内

    千次阅读 2018-08-06 22:48:04
    当网页页面上需要添加锚点回到顶部时,要判断当前页面的浏览情况,比如规定一个点,当它出现在可视范围内时,显式回到顶部的图标,否则,回到顶部的图标隐藏。 代码如下: &lt;!DOCTYPE html&gt; &lt...
  • 判断元素是否在可视区域

    千次阅读 2017-08-01 13:36:08
    getBoundingClientRect() function isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0),
  • function ISshow(dom, callback) { // start 。。。。 var status = Array.isArray(dom); // 减少判断 var scro = (function() { if(document.document...
  • 当用户浏览网页的时候,判断某个元素是否浏览器可视区域内,比如视频播放,如果用户滚动看评论,应该停止播放 啥也不说了,直接上demo: visibilitychange 应用 #div1,#div2,#d
  • div class="main"> <div class="menu"></div> <div class="banner"></div> <div class="news"></div> <div class="video"></div> <div class="banner"&...
  • js 判断进入可视区域

    2018-04-14 08:38:00
    js 判断进入可视区域 CreateTime--2018年4月14日08:17:41 Author:Marydon 1.使用场景  图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充! 2.代码实现 /** * 监听网页滚动事件 */ $...
  • <!DOCTYPE ... <... <....div{ ....div1{ ...div class="div">.../div>...div class="div1">.../div>...当class="div1"的div 里面的内容超出 浏览器的底部的时候 div出现滚动条而不是浏览器出现滚动条
  • // Determine if an element is in the visible viewportfunction isInViewport(element) {var rect = element.getBoundingClientRect();...//IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出...
  • <! ...> < ...="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, ...其中有gitH()函数和判断是否在可视区域。 加油。 转载于:https://www.cnblogs.com/xiaoxiao2014/p/6070271.html
  • $('.el_topNav>div').eq(i).addClass('el_active').siblings().removeClass('el_active') //添加某一个样式 i为当前盒子下标 } } }) 转载于:https://www.cnblogs.com/yzyh/p/9029140.html
  • var click = document.getElementById(id)//点击div得dom元素 var alert = document.getElementById("details")//弹出层的dom元素 click.onmouseup = function (e) { var scrollX = document.documentElement....
  • offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 最底下, $("#app").offset().top就表示 #app这个元素距离页面顶端的距离,它一般是固定的,不随窗口滚动而改变。 $(window).scrollTop...
  • console.log('在可视区域' + ((this.getScrollTop() + this.getClientHeight() - scroolCon.offsetTop) (this.getScrollTop() + this.getClientHeight() - scroolCon.offsetTop))) } if (scroolConScrol - this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,430
精华内容 2,972
关键字:

判断div在可视区域