黑马程序员-JS基础-PC端网页特效

目录

元素偏移量offset系列

 属性及说明

示意图

offset与style的区别

案例1 在登录页面中拖动登录框

元素可视区client系列

属性及说明

示意图

 元素scroll系列

属性及说明

 示意图

 案例 淘宝固定右侧的侧边栏

其他

立即执行函数

回调函数

动画函数的封装

mouseenter和mouseover的区别

节流阀

---

元素偏移量offset系列

•  属性及说明

属性	说明
element.offsetParent	返回带有定位的父级元素，没有就返回body
element.offsetTop	返回元素相对于带有定位的父级元素上方的偏移
element.offsetLeft	返回元素相对于带有定位的父级元素左边的偏移
element.offsetWidth	返回元素自身的宽度，包括边框在内，不带单位
element.offsetHight	返回元素自身的高度，包括边框在内，不带单位

• 示意图

• offset与style的区别

  offset	style
  可以得到任意样式表中的值	只能得到行内样式表中的值
  不带单位的数值	带单位的字符串
  offsetWidth包含边框在内	style.width不包含padding和border
  只读属性，不能修改	可以读写，可以修改

• 案例1 在登录页面中拖动登录框

          ......

            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标

        title.addEventListener('mousedown', function(e) {

            var x = e.pageX - login.offsetLeft;

            var y = e.pageY - login.offsetTop;

            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值

            document.addEventListener('mousemove', move)

            function move(e) {

                login.style.left = e.pageX - x + 'px';

                login.style.top = e.pageY - y + 'px';

            }

            // (3) 鼠标弹起，就让鼠标移动事件移除

            document.addEventListener('mouseup', function() {

                document.removeEventListener('mousemove', move);

            })

        })

元素可视区client系列

属性及说明

属性	说明
element.clientTop	返回元素自身上边框的大小
element.clientLeft	返回元素自身左边框的大小
element.clientWidth	返回元素自身的宽度，但不包含边框
element.clientHight	返回元素自身的高度，但不包含边框

示意图

 元素scroll系列

属性及说明

属性	说明
element.scrollTop	返回被卷去的上侧距离，是不带单位的数值
element.scrollLeft	返回被卷去的左侧距离，是不带单位的数值
element.scrollWidth	返回自身实际的宽度，不含边框，不带单位
element.ScrollHight	返回自身实际的高度，不含边框，不带单位

 示意图

 案例 淘宝固定右侧的侧边栏

 document.addEventListener('scroll', function() {

                if (window.pageYOffset >= bannerTop) {

                    sliderbar.style.position = 'fixed';

                    sliderbar.style.top = sliderbarTop + 'px';

                } else {

                    sliderbar.style.position = 'absolute';

                    sliderbar.style.top = '300px';

                }

                //  当我们页面滚动到main盒子，就显示 goback模块

                if (window.pageYOffset >= mainTop) {

                    goBack.style.display = 'block';

                } else {

                    goBack.style.display = 'none';

                }

            })

其他

立即执行函数

立即执行函数: 不需要调用，立马能够自己执行的函数语法：(function() {})()    或者  (function(){}());第一个括号里面是形参，第二个括号里面是实参；

作用：独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况

  (function(a, b) {

            console.log(a + b);

             })(1, 2);

回调函数

把函数当作一个参数传到另外一个函数中，当需要用这个函数时，再回调运行()这个函数.

这个函数不会立即被执行，需要调用；回调函数是一个闭包，可以访问外层变量，在执行回调函数前最好确认其是一个函数。

动画函数的封装

mouseenter和mouseover的区别

mouseenter不会触发冒泡事件

节流阀

当上一个动画执行完毕再执行下一个动画，让事件无法连续触发；

核心思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数；

应用场景：网页轮播图；

 var flag = true;

    arrow_r.addEventListener('click', function() {

        if (flag) {flag = false; 执行动画函数}；

                flag = true; // 打开节流阀