client,offset.scroll系列/案例

一.client, offset, scroll系列

1.client系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>client</title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                position: absolute;
                border: 10px solid coral;
                /*margin: 10px 0px 0px 0px;*/
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box">呜呜呜呜呜呜呜呜无无无无无无无无无无无无无无无无无无无无无无无无无无无呜呜呜呜呜呜呜呜无无无无无无无无无无无无无无无无无无无无无无无无无无无</div>

        <script type="text/javascript">
//            clientTop    内容区域到边框顶部的距离,说白了就是边框的-高度
//            clientLeft    内容区域到边框左部的距离,说白了就是边框的宽度
//            clientWidth    内容区域+左右padding,不包含border  可视宽度
//            clientHeight    内容区域+上下padding 可视高度

            var oBox = document.getElementsByClassName("box")[0];
            console.log(oBox.clientTop);
            console.log(oBox.clientLeft);
            console.log(oBox.clientWidth);
            console.log(oBox.clientHeight);
        </script>
    </body>
</html>

示例

2.屏幕的可视区域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>屏幕可视化区域</title>
    </head>
    <body>
        <script type="text/javascript">

            //屏幕的可视化区域
            window.onload = function(){

                //document.documentElement 获取的是HTML标签
                console.log(document.documentElement.clientWidth);
                console.log(document.documentElement.clientHeight);

                //窗口大小发生变化时,会调用此方法
                window.onresize = function(){
                    //console.log(111);
                    console.log(document.documentElement.clientWidth);
//                    console.log(document.documentElement.clientHeight);
                }
            }
        </script>
    </body>
</html>

屏幕的可视区域

3.offset系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>offset系列</title>
    </head>
    <body style="height: 2000px;">
        <div>
            <div class="wrap" style="width: 300px; height: 300px; background-color: aquamarine; position: relative; top: 20px;">
                <div id="box" style="width: 200px; height: 200px; border: 5px solid cornflowerblue; position: absolute; top: 60px; left: 30px;"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById("box")
//            offsetWidth占位宽  内容+padding+border
//            offsetHeight占位高
//            ofsetTop:如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的top值
//            offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么以父辈为基准的left值

            console.log(box.offsetTop);
            console.log(box.offsetLeft);

            //console.log(box.offsetWidth)
            //console.log(box.offsetHeight)
        }
    </script>
</html>

offset系列

4.scroll系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>scroll</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body style="width: 2000px; height: 2000px;">
        <div style="height: 200px; background-color: rosybrown;"></div>
        <div style="height: 200px; background-color: burlywood;"></div>
        <div style="height: 200px; background-color: cornflowerblue;"></div>
        <div style="height: 200px; background-color: darkcyan;"></div>
        <div style="height: 200px; background-color: aquamarine;"></div>
        <div id = "scroll" style="width: 200px; height: 200px; border: 1px solid red; overflow: auto; padding: 10px; margin: 5px 0px 0px 0px;">
            <p>嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰</p>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){

            //实施监听滚动事件
            window.onscroll = function(){
                //console.log(111);
                //页面卷起的高度
//                console.log("上" + document.documentElement.scrollTop);
//                console.log("左" + document.documentElement.scrollLeft);
//                console.log("宽" + document.documentElement.scrollWidth);
//                console.log("高" + document.documentElement.scrollHeight);
            }
            var s = document.getElementById("scroll");

            s.onscroll = function(){
                //scrollHeight: 内容的高度+padding 不包含边框
                //console.log("上"+s.scrollTop)
                //console.log("左"+s.scrollLeft)
                //包含内容 + padding+border
                console.log("宽" + s.scrollWidth);
                console.log("高" + s.scrollHeight);
            }
        }
    </script>
</html>

示例

5.自动执行函数

HTMl:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="1.js"></script>
    <script src="2.js"></script>
    <script>

        console.log(window.$);
        console.log(window.$1);

    </script>
</body>
</html>

JavaScript:

(function(window) {

    var a = 5;
    window.$ = a;

})(window);
(function(window) {

    var a = 6;
    window.$1 = a;

})(window);

6.固定导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定导航栏</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .head{
                width: 100%;
                height: 80px;
                background-color: cornflowerblue;
            }
            .content{
                width: 100%;
                height: 1000px;
                background-color: darkgray;
                /*position:relative;*/
            }
            .fixTop{
                width: 100%;
                height: 100px;
                background-color: greenyellow;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1000;
            }
            .input{
                width: 400px;
                height: 60px;
                background-color: darkcyan;
                position: absolute;
                left: 50%;
                margin-left:-200px
                top: 150px;
            }
        </style>
    </head>
    <body>
        <div class="head"></div>
        <div class="content">
            <div class="input"></div>
        </div>
        <div class="fixTop" style="display: none;"></div>

        <script type="text/javascript">
            window.onload = function(){
                var fromTop = document.getElementsByClassName("input")[0].offsetTop;
                var fixBox = document.getElementsByClassName("fixTop")[0];

                console.log(fromTop);
                var count = 0;
                var time = null;
                window.onscroll = function(){
                    var htmlTop = document.documentElement.scrollTop;
                    console.log(htmlTop);

                    if (htmlTop >= fromTop) {
                        clearInterval(time);
                        time = setInterval(function(){
                            count += 10;
                            fixBox.style.display = "block";

                            fixBox.style.opacity = count;
                            fixBox.style.height = count + "px";

                            if (count == 100) {
                                clearInterval(time);
                                count = 0;
                            }
                        },1)
                    }else{
                        fixBox.style.display = "none";
                    }
                }
            }
        </script>
    </body>
</html>

固定导航栏

二.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0;
            outline: none;
        }
        body{
            /*padding-top: 80px;*/
        }
        .header{
            width: 100%;
            height: 70px;
            background-color: black;
            /*display: none;*/
        }
        .w{
            width: 1210px;
            overflow: hidden;
            margin: 0 auto;
        }
        .header ul li{
            float: left;
            width: 242px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background-color: blue;

        }
        .header ul li a{
            display: block;
            width: 242px;
            height: 70px;
            color: #fff;
        }

        /*固定导航栏*/
        .header-fix{
            width: 100%;
            height: 80px;
            background-color: white;
            box-shadow: 0 0 5px #888;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
            /*margin-bottom: 10px;*/
        }
        .header-fix .logo{
            float: left;
            width: 117px;
            height: 57px;
            padding-top: 23px;
        }
        .header-fix .fm{
            float: left;
            width: 700px;
            height: 80px;
            margin-left: 100px;
        }
        .fm input[type=‘text‘]{
            float: left;
            width: 578px;
            height: 50px;
            border-top: 1px solid #999;
            border-left: 1px solid #999;
            border-bottom: 1px solid #999;
            margin-top: 15px;
            padding-left: 20px;
            font-size: 20px;
        }
        .fm input[type=‘submit‘]{
            float: left;
            width: 100px;
            height: 52px;
            background-color: #38f;
            position: relative;
            top: 15px;
            color: #fff;
            line-height: 52px;
            font-size: 18px;
        }
        .box1{
            width: 100%;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 100%;
            height: 300px;
            background-color: green;
        }

    </style>
</head>
<body style="height: 2000px">
    <div class="header">
        <div class="w">
            <ul>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
            </ul>
        </div>
    </div>
    <div class="header-fix">
        <div class="w">
            <div class="logo">
                <img src="./logo_top.png" alt="">
            </div>
            <form class="fm">
                <input type="text" name="">
                <input type="submit" name="" value="百度一下">
            </form>
        </div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>

    <script type="text/javascript">
        window.onload = function(){
            var box2Height = document.getElementsByClassName(‘box2‘)[0];
            var fixBox = document.getElementsByClassName(‘header-fix‘)[0];
            var headerBox = document.getElementsByClassName(‘header‘)[0];

            window.onscroll = function(){
                console.log(box2Height.offsetTop);
                if (document.documentElement.scrollTop >=box2Height.offsetTop) {
                    fixBox.style.display = ‘block‘;
                    document.body.style.paddingTop = ‘80‘+ ‘px‘;
                    headerBox.style.display = ‘none‘;
                }else{
                    fixBox.style.display = ‘none‘;
                    document.body.style.paddingTop = ‘0‘+ ‘px‘;
                    headerBox.style.display = ‘block‘;
                }
            }
        }
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/rixian/p/9720316.html

时间: 2024-10-29 20:37:08

client,offset.scroll系列/案例的相关文章

元素的client offset scroll三个系列

clientWidth/clientHeight/clientTop/clientLeft offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent scrollWidth/scrollHeight/scrollTop/scrollLeft 原文地址:https://www.cnblogs.com/dmzzyc/p/10054762.html

client、offset、scroll系列

1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; border: 10px solid red; /*ma

4.client、offset、scroll系列

client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了就是边框的乱度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度 client演示 <!DOCTYPE html> <html> <head> <meta cha

offset系列、client系列、scroll系列

offset系列.client系列 <style> .testDOM { width: 200px; height: 200px; background-color: #2de; padding: 20px; border: 10px solid #ec6; margin: 20px; } </style> <!-- margin: 20px; padding: 20px; border: 10px; 200px * 200px => 260px * 260px--&g

16-client、offset、scroll系列

1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; border: 10px solid red; /*ma

offset、client、scroll开头的属性归纳总结

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent  第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1

js的offset,client,scroll的区别

javascript的offset.client.scroll在使用过程中非常频繁,接下来将对此进行一一介绍,了解其区别和使用方法. offsetTop 指元素距离上方或上层控件的位置,整型,单位像素.  offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素.  offsetWidth 指元素控件自身的宽度,整型,单位像素.  offsetHeight 指元素控件自身的高度,整型,单位像素.  网页可见区域宽:document.body.clientWidth  网页可见区域高:

Web API (scroll系列)、(仿淘宝侧边栏效果实现)、(mouseenter与mouseover的区别)、(动画的原理)、(缓动动画)

一 .三大系列中的scroll系列 : (1)scrollLeft |  scrollTop  :水平   |   垂直方向滚动出去的距离  : (2)scrollWidth |  scrollHeight   :内容的真是宽度  |  高度   : (3)滚动整个页面的时候  :   window . pageYOffset   : 二 .仿淘宝侧边栏效果实现 : 1.  找到关心的元素对象  : (1)banner区域  元素对象  : (2)侧边栏的元素对象   : (3)主体部分元素对象

offset,scroll,client三大系列

offset 偏移 offsetWidth是指div的宽度(包括div的边框) offsetWidth = width + padding + border: offsetHeight是指div的高度(包括div的边框) offsetHeight = Height + padding + border: offsetLeft是指div到整个页面左边框的距离(不包括div的边框) offsetTop是指div到整个页面上边框的距离(不包括div的边框) scroll?????????滚动 scro