PC网页特效

元素偏移量系列 offset

offset就是偏移量，使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等。

1. 可以获取元素距离带有定位父元素的位置
2. 获取元素自身的大小（宽度和高度）
3. 注意：返回值不带单位

offset系列常用属性：

• element.offsetParent 返回作为该元素带有定位的父级元素，若父级元素没有定位则返回body

• element.offsetTop 返回该元素相对有定位的父元素的上方的偏移

• element.offsetLeft 返回该元素相对有定位的父元素的左方的偏移

• element.offsetWidth 返回该元素包括padding，border和content的宽度，不包括单位

• element.offsetHeight 返回该元素包括padding，border和content的高度，不包括单位

   <div class="father">
           <div class="son"></div>
       </div>
       <div class="w"></div>
       <script>
           // offset 系列
           var father = document.querySelector('.father');
           var son = document.querySelector('.son');
           // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
           console.log(father.offsetTop);
           console.log(father.offsetLeft);
           // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
           console.log(son.offsetLeft);
           var w = document.querySelector('.w');
           // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width,padding和border会撑大盒子 
           console.log(w.offsetWidth);
           console.log(w.offsetHeight);
           // 3. 返回带有定位的父亲 否则返回的是body
           console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
           console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
       </script>
  

offset和style的区别

offset:

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width
• offsetWidth 等属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style:

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值
• 所以，我们想要给元素更改值，则需要用style改变

获取鼠标在盒子内的坐标：

<style>
        .box {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin: 200px;
    }
    </style>
<div class="box"></div>
    <script>
        // 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
        // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
        // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
        // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
        var box=document.querySelector('.box');
        box.addEventListener('mouseover',function(e){
            var x=e.pageX-this.offsetLeft;
            var y=e.pageY-this.offsetTop;
            this.innerHTML='x坐标是'+x+'y坐标是'+y;
        })
    </script>

拖动模态框

    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>

    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        var login=document.querySelector('.login');
        var mask=document.querySelector('.login-bg');
        var link=document.querySelector('#link');
        var closeBtn=document.querySelector('#closeBtn');
        var title=document.querySelector('#title');
        link.addEventListener('click',function(){
            mask.style.display='block';
            login.style.display = 'block';
        })
        closeBtn.addEventListener('click', function() {
            mask.style.display = 'none';
            login.style.display = 'none';
        })
        title.addEventListener('mousedown',function(e){
            var x=e.pageX-login.offsetLeft;
            var y=e.pageY-login.offsetTop;
            //模态框的位置
            document.addEventListener('mouseover',move)
            function move(e){
                login.style.left=e.pageX-x+'px';
                login.style.top=e.pageY-y+'px';
            }
            document.addEventListener('mouseup',function(e){
                document.removeEventListener('mouseover',move);
            })
        })
    </script>

元素可视区系列 client

client系列相关属性可以来获取元素可视区的相关信息，通过client系列相关属性可以动态得到该元素边框大小，元素大小等。

element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包括padding，内容区的高度，不含边框，返回数值不带单位

立即调用函数

不需要调用，立马可以自己执行的函数；
多个立即函数用；隔开；
立即执行函数最大的作用就是独立创建了一个作用域，每个立即函数中的变量都不会冲突，在不同的作用域中。
(function(形参){ 函数体 })()； //第二个小括号可以看作调用函数
(function(形参){函数体}());

(function(a,b){
	console.log(a+b);
})(1,2)  //小括号内可以传递实参

(function(a,b){
		console.log(a+b);
	}(1,2) ）

元素滚动系列scroll

element.scrollTop 返回元素被卷上去的上侧距离，返回数值不带单位
window.pageYOffset 页面被卷去的上侧距离
element.scrollLeft 返回被卷上去的左侧距离，返回数值不带单位
window.pageXOffset 页面被卷去的左侧距离
element.scrollWidth 返回自身的实际宽度，不含边框，返回数值不带单位
element.scrollHeigth 返回自身的实际高度（内容高度），不含边框，返回数值不带单位

淘宝返回顶部案例

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 150px;
            background-color: purple;
        }

        .banner {
            height: 250px;
            background-color: skyblue;
        }

        .main {
            height: 1000px;
            background-color: yellowgreen;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //页面滚动事件 事件源为document
        //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
        // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function () {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

        })

    </script>

总结

对比：
element.offsetWidth 返回该元素包括padding，border和content的宽度，不包括单位
element.clientWidth 返回该元素包括padding和content的宽度，不包括border，不包括单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回值不带单位

用法：
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client 经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得

mouseenter和mouseover

区别：
当鼠标移动到元素上时就会触发 mouseenter 事件，类似于 mouseover

它们两者之间的差别是：

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
mouseenter 只会经过自身盒子触发，因为mouseenter不会冒泡
鼠标离开 mouseleave 同样不会冒泡