（1）PC端网页特效导读、offset概述

学习目标：

• 能够说出常见offset系列属性的作用
• 能够说出常见client系列属性的作用
• 能够说出常见scroll系列属性的作用
• 能够封装简单动画函数
• 能够写出网页轮播图案例

知识点即为：

1. 元素偏移量offset系列
2. 元素可视区client系列
3. 元素滚动scroll系列
4. 动画函数封装
5. 常见网页特效案例

---

offset概述

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

• 获取元素距离带有定位父元素的位置
• 获得元素自身的大小（宽高）
• 返回的数值都不带单位

element.offsetParent	返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

offset与style区别

offset	style
offset可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
获得的数值没有单位	style.width获得的是带有单位的字符串
offsetWidth包含padding+bober+width	不包含padding+bober
只能获取，不能赋值	可读写属性
获取元素大小位置用offset合适	给元素更改值，需要用style

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

1. 在盒子内点击，想要得到鼠标距离盒子左右的距离
2. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
3. 其次得到盒子在页面中的距离（box.offsetLeft, box.offsetTop）
4. 相减

 var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
        })

---

学习快乐!