【JavaScript】网页的一些相关属性与效果实现

---

网页效果实现

一、基本要求

• offset 、client、 scroll系列属性的作用与使用
• 封装简单动画函数
• 节流阀的思想
• 网页轮播图实现

---

二、元素偏移量 ——offset

01. 概述

• offset：偏移量，可以得到元素的位置（偏移）、大小
  • 获取元素相对于父元素的偏移量
    • 【注意】父元素需要定位，如果没有定位，则找到有定位的祖先元素，直到body
  • 获取元素自身的大小（宽高）
  • offset偏移量返回的是数值，不带单位

02. 常见属性

属性	作用
element.offsetParent	返回目标元素带有定位的父级元素，没有则向上一级查找（就近原则），直到body
element.offsetTop	返回元素相对于**父元素（有定位）**上方的偏移量
element.offsetLeft	返回元素相对于**父元素（有定位）**左边框的偏移量
element.offsetWidth	返回自身的宽度（padding+border+content）
element.offsetHeight	返回自身的高度（padding+border+content）

var son = document.querySelector(".father");

console.log(son.offsetParent);	//	返回son的father，如果father没有定位,则返回body

03. offset与style的区别

offset	style
offset可以获取任意样式表中的样式值	style只能获取行内样式表中的样式值
offset获取的数值没有单位	style.width获取带有单位的字符串
offsetwidth包含 padding+border	style.width获得不包含 padding+border
offset~属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值

• 总结：如果是要获取元素的大小、位置，则用offset ；如果是要给元素更改值，则需要用style

---

三、元素可视区——client

01. 概述

• client：获取元素可视区的相关信息，可以动态的得到元素的边框大小、元素大小等

02. 常见属性

属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回元素宽度（padding+content）
element.clientHeight	返回元素高度（padding+content）

---

四、元素滚动 scro‖

01. 概述

• scro‖：滚动的，可以得到该元素的大小、滚动距离等

02. 常见属性

属性	作用
element.scrollTop	返回元素被卷去的上侧距离（这里的元素是父元素，且子元素内容超出父元素，且父元素有滚动条）
element.scrollLeft	返回元素被卷去的左侧距离
element.scrollWidth	返回元素自身实际的宽度（content）(以内容大小为准，即便溢出)
element.scrollHeight	返回元素自身实际的高度（content）

03. 滚动事件

• scroll：滚动时触发的事件

  document.addEventListener("scroll",function(){
      console.log(element.scrollTop);	//滚动时，打印元素被卷去的上侧距离
  });
  

04. 页面卷去事件

• element.scrollTop：元素被卷去的上侧距离
• window.pageYOffset：页面被卷去的上侧距离（主要的）
• window.scrollY：页面被卷去的上侧距离，同pageYOffset

---

五、鼠标事件对象

前文内容，放在这里一起比较

• 鼠标坐标

  • e.clientX和e.clientY

    得到鼠标相对于 client可视窗口区域的坐标

  • e.pageX和e.pageY————（主要）

    得到鼠标相对于页面文档的坐标

  • e.screenX和e.screenY

    得到鼠标相对于电脑屏幕的坐标

• 鼠标移动

  • mousemove

    只要鼠标移动，就触发事件

    document.addEventListener('mousemove', function(e) {
       console.log("X坐标:"+e.pageX+",Y坐标:"+e.pageY);
    });
    

---

六、系列动画函数封装

01. 概念

• 核心原理：通过定时器 setInterval()不断重复事件
• 节流阀：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
  • 核心实现思路：利用回调函数，添加一个变量控制，锁住函数和解锁函数。

02. 需要掌握

• 轮播图的实现

  1.移动动画函数封装

  2.节流阀控制

  3.自动播放–触发点击事件

---