JavaScript的第十一天

.offsetParent	返回最近的具有定位属性的祖先元素，如果没有这样的祖先元素，则返回最近的 table、td、th 或 body 元素
offsetTop	元素顶部边缘距离其最近的具有定位属性的祖先元素顶部边缘的距离
offsetLeft	元素左侧边缘距离其最近的具有定位属性的祖先元素左侧边缘的距离
offsetHeight	元素的高度，包括元素的高度、垂直内边距（padding）、垂直边框（border）以及滚动条（如果存在且渲染在元素内部）
offsetWidth	元素的宽度，包括元素的宽度、水平内边距（padding）、水平边框（border）以及滚动条（如果存在且渲染在元素内部）

代码示例和解析

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

        //返回最近的具有定位属性的祖先元素，
        //如果没有这样的祖先元素，则返回最近的 table、td、th 或 body 元素
        console.log(son.offsetParent);

        //元素顶部边缘距离其最近的具有定位属性的祖先元素顶部边缘的距离
        console.log(son.offsetTop);

        //元素左侧边缘距离其最近的具有定位属性的祖先元素左侧边缘的距离
        console.log(son.offsetLeft);

        //元素的宽度，包括元素的宽度、水平内边距（padding）、水平边框（border）
        //以及滚动条（如果存在且渲染在元素内部）
        console.log(son.offsetWidth);


        //元素的高度，包括元素的高度、垂直内边距（padding）、垂直边框（border）
        //以及滚动条（如果存在且渲染在元素内部）
        console.log(son.offsetHeight);

鼠标点击案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 200px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。

        var box = document.querySelector(".box")


        // e.pageX -this.offsetLeft
        //使用event属性来获取函数内该属性的具体数值
        //选择pageX（事件位置相对于整个文档的水平坐标）
        //使这个值和offset属性相对应
        box.onclick = function (e) {

            console.log(e.pageX, e.pageY);
            // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）

            console.log(box.offsetTop, box.offsetLeft);
            // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)

            var x = e.pageX - box.offsetLeft
            var y = e.pageY - box.offsetTop
            // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标

            console.log(x, y);
        }

    </script>
</body>

</html>

二、client系列

client和offset的区别

1、client的参考系不包含元素的边框，但是包含元素的内边距。包含的内容不包括滚动条（如果存在且渲染在元素外部）

2、offset的参考系包含元素的边框，不包含元素的外边距。包含的内容内包含了滚动条（如果存在且渲染在元素内部）

clientTop	该元素对象的上边框宽度
clientLeft	该元素对象的左边框宽度
clientWidth	该元素对象的宽度，不包含边框
clientHeight	该元素对象的高度，不包含边框

三、像素比和pageshow事件

1、像素比：devicepixelratio（设备像素比），可以获取当前窗口显示的放大比例

        console.log(window.devicePixelRatio);

2、pageshow：在页面显示时触发，无论页面是否来自浏览器的往返缓存（即无论页面是首次加载还是从缓存中恢复），pageshow 会在 load 事件之后触发

        window.addEventListener("pageshow", function () {
            console.log(1);
        })

四、scroll系列

scroll系列属性用于获取或设置元素在视口中的滚动位置。这些属性通常与滚动事件（如 scroll 事件）结合使用，以实现各种滚动相关的交互效果

scrollWidth	返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。
scrollHeight	返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。
scrollLeft	被隐藏在内容区域左方的距离。设置该值可以改变元素的起始滚动位置
scrollTop	被隐藏在内容区域上方的距离。设置该值可以改变元素的起始滚动位置

五、mouseenter和mouseover之间的区别

        mouseenter和mouseover都是鼠标事件，在鼠标进入一个元素时触发事件。



区别：

        1、事件冒泡上的区别：

mouseenter事件冒泡：即在使用mouseenter事件时鼠标进入一个元素有且只有当前元素触发事件。



mouseover事件冒泡：在使用mouseover事件时鼠标进入一个元素会触发事件，并进行冒泡，其父级元素和祖先元素（父级的父级的父......）也会依次触发事件。



        2、事件触发条件上的区别：

mouseenter：在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。



mouseover：鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

六、JS中的动画效果

1、动画的原理解析：使用定时器在规定时间内取改变元素的值，并进行不断的循环更新来造成一种连续性的动画效果。

即使用 setInterval（）来实现循环和定时效果

2、语法解析：使用animation函数（简单动画函数封装）来完成动画

dom：表示要进行动画操作的dom元素

time：表示动画单次执行的时间长度，单位默认为毫秒

size：表示元素的目标尺寸，可以是宽度或高度，或者是在元素内的

function animation(dom,time,size)
    {
        setInterval(function(){
            dom.style.left = dom.offsetleft +size +"px"
        },time)
    }

七、轮播图

在对轮播图的实现效果中，需要理清程序完成的顺序，并对事件进行一一对应，重要的是学习如何完成单个功能，而不是仅仅对于代码的copy。

类似于css中的布局，JS中当对流程和操作熟悉后只需要写入事件即可完成，主要培养的是思路而不是练习，在后续使用vue框架后js的代码操作将会减少

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    img {
      width: 500px;
    }

    .box {
      width: 800px;
      height: 600px;
      border: 2px solid #ccc;
      position: relative;
    }

    .box>div {
      width: 500px;
      margin: 0 auto;
    }

    .left {
      position: absolute;
      top: 200px;
      left: 0;
      font-size: 100px;
    }

    .right {
      position: absolute;
      top: 200px;
      right: 0;
      font-size: 100px;
    }

    ul {
      width: 420px;
      display: flex;
      /* border: 1px solid #ccc; */
      position: absolute;
      bottom: 10px;
      left: 190px;
    }

    .bg {
      background-color: #0f0;
    }

    li {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 20px;
      /* float: left; */
    }
  </style>
</head>

<body>
  <div class="box">
    <div>
      <img src="./images/11.png" alt="">
    </div>

    <span class="left">&lt;</span>
    <span class="right">&gt;</span>
    <ul>
      <li class="bg"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

</body>
<script>
  // 图片src地址放入数组arr
  var imgArr = ["./images/11.png", "./images/22.png",
     "./images/33.png", "./images/44.png",
     "./images/55.png", "./images/66.png"]

  var img = document.querySelector("img")
  var lis = document.querySelectorAll("li")
  var box = document.querySelector(".box")
  var left = document.querySelector(".left")
  var right = document.querySelector(".right")
  var index = 0
  img.src = imgArr[index]
  var timer = null;



  // 定时器timer设为全局变量  方便清除
  setTimer()
  function setTimer() {
    timer = setInterval(function () {
      index++
      if (index == 6) index = 0
      change()
    }, 1000)
  }


  // 父元素监听 鼠标移入和移出事件
  box.addEventListener("mouseenter", function () {
    clearInterval(timer)
  })

  box.addEventListener("mouseleave", function () {
    setTimer()
  })


  // 左右按钮点击事件
  left.addEventListener("click", function () {
    index--
    if (index == -1) index = 5
    change()
  })
  right.addEventListener("click", function () {
    index++
    if (index == 6) index = 0
    change()
  })

  // 点击单个圆点 改变src和index
  for (var i = 0; i < lis.length; i++) {
    lis[i].setAttribute("index", i)
    lis[i].onclick = function () {
      index = this.getAttribute("index")
      change()
    }
  }


  // 封装的改变图片src地址和圆点背景色
  function change() {
    img.src = imgArr[index]
    for (var i = 0; i < lis.length; i++) {
      lis[i].className = ""
    }
    lis[index].className = "bg"
  }
</script>

</html>