电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
JavaScriptASP编程PHP编程Python编程ASP.NET

js除此以外区域启动时:getBoundingClientRect方法

2021-03-01 21:30:48 出处:[ 菜菜电脑网 ] 人气:次阅读
当元素受制于也就是说区域时再载入,例如淘宝天猫上推入网页时不是所有图片都读取出来了,而是当滚动条紧贴到那个区域时才调用出来图片。

方法:确实元素顶部到浏览器窗口顶部的距离究竟多于一般来说区域高度,如果高于就看出。这里可以用一个方法: getBoundingClientRect(),该方法留在一个对象,该对象存储了元素四个边界到浏览器窗口上边和左边的距离。

getBoundingClientRect方法:

1.png

代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>也就是说区域启动时</title>    <style>        #showp {            width: 500px;            height: 350px;            background-color: aqua;            margin: 1000px auto 0 auto;        }                .showp {            animation: loading 2s linear;        }                @keyframes loading {            from {                opacity: 0;                transform: translate(-100%, 0);            }            to {                opacity: 1;                transform: translate(0, 0);            }        }    </style></head><body>    <p id="showp"></p>    <script type="text/javascript">        window.onscroll = function() {            var show = document.getElementById("showp");            // 给与浏览器窗口可视化高度            var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;            // 换取showp元素顶部到浏览器窗口顶部的距离            var showTop = show.getBoundingClientRect().top;            // 如果距离极小可视化窗口高度,就给showp元素加进动画效果            if (showTop <= clientH) {                show.classList.add("showp");            }        };    </script></body></html>

直通结果:不告诉他为什么。。。结果的动图附上不上来。。。。口述一下好了:就是动画开始不启动时,滚动条摇动到可以表明元素的时候才不会开始查找动画。可以利用这个原理来发挥作用图片的启动时,就是图片到可用区域的时候给它乐府src的值。
关的延揽:

JS图片先于载入实例

发送给大图该网站大图隐蔽

以上就是js区域读取:getBoundingClientRect方法的参考内容,更多恳请注意php中文网其它系统性文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152