webAPI第五天网页特效

回顾昨日冒泡事件

e.stopPropagation() //阻止冒泡
removeEventListener() // 注销事件监听
委托：原理是用了冒泡，监听给父元素

手风琴案例

实现的效果，在一个大div内有几个小div，每个小DIV的大小一样，鼠标划过那个div，这个div就变大，其他几个div变小。鼠标离开变回原样
编程步骤：2.1 获取元素；2.2 循环绑定事件，配合css实现效果。

let lis = document.querySelectiorAll('li')
for ( let i = 0;i<lis.length;i++) {
    //鼠标移入
    lis[i].addEventListener('mouseenter',()=>[
        for (let j = 0;j<lis.length;j++) {
        lis[j].style.width = '100px'
    }
    this.style.width = '800px'
    ])
    //鼠标离开
    for(let j = 0;j<lis.length;j++){
        lis[j].style.width='240px'
    }
}

li {
    transition: all 500ms;
}

滚动事件和加载事件--知识点

1. 滚动事件：

页面滚动的时候触发的事件，事件名scroll，一般把监听给window或document，也可以是其他元素

window.addEventListener('scroll',()={
    
})

let div = document.querySelector('div')
div.addEventListener('scroll',()={
    
})

2. 加载事件：

加载外部资源完毕时触发的事件，事件名：load

let img = document.querySelector('img')
img.addEventListener('load',()={
})
//或 window.addEventListener('load',()=>{})之类

2.1 特别加载事件：

DOMContentLoaded, DOM树加载完毕事件

document.addEventListener('DOMContentLoaded',()={})

元素大小和位置--知识点

1.scroll家族，可读写

获取元素内容总宽和高，返回不带单位

let div = document.querySelector('div')
div.scrollWidth //内容的宽度 
div.scrollHeight // 内容的高度

1.1 获取位置：

元素往左和往下被卷去看不到的距离（重点）

window.scrollTop //被卷去的高度，也是页面往下走的高度
window.scrollLeft // 被卷去的左侧
window.addEventListener('scroll',()=>{
    console.log(document.documentElement.scrollTop)  //document.documentElement 就是html标签
})

let div = document.querySelector('div')
div.addElementlistener('click',()=>{
    document.documentElement.scrollTop = 500 //可以给值，指定滚动到什么位置 ，重点！没有单位！
})

2.offset家族

得到宽高和获取位置

2.1 得到元素的宽和高

仅仅是盒子模型盒子的大小（内容+padding+border）

let div = document.querySelector('div')
console.log(div.offsetWidth)// div的宽度
console.log(div.offsetHeight) // div的高度

2.2 获取位置

获取元素距离定位父级元素的左、上距离，父元素没定位，页面左上角，只读。

let div = document.querySelector('div')
console.log(div.offsetTop)// 高度距离 ，以左上角
console.log(div.offsetHeight) //左边距，以左上角

电梯导航案例

1681955566410.png

点击小导航，当前添加active ，其余移除activ，得到对应内容的offsetTOP值，滚动到相应位置

let items = document.querySelectorAll('.item')
let contents = document.querySelectorAll('content')
for (let i =0;i<items.length;i++) {
    items[i].addEventListener('click',()=>{
        document.querySelector('.aside .active').classList.remove('active')
        this.classList.add('active')
        document.documentElement.scrollTop = contents[i].offsetTop
    })
}

3.client家族

3.1得到可视区域的大小

let div = document.querySelector('div')
console.log(div.clientWidth) //仅仅是可是区域，不包含滚动条，边框等，包含padding
console.log(div.clientHeight) //仅仅是可是区域，不包含滚动条，边框等，包含padding
window.addEventListener('resize',function() {          //resize事件，窗口大小改变
    console.log(document.documentElement.clientWidth)
})

3.2 得到可视区域边框的宽度

clientLeft，clientTop 得到就是盒模型border的上宽度与左宽度

综合案例轮播图

1681959336323.png

思路：①分析html与css结构②根据需求分解为几个javascript模块③写各个模块，测试模块

需求：

鼠标移入小图标，小图标高亮，下边绿色，其他图片遮罩，无边框高亮
当鼠标移入小图片，显示上面的大图片，上面的大图片有淡入淡出效果 opacity
自动更改图片描述信息
点击箭头按钮，播放上一张或下一张 index= index % lis.length
定时器自动播放
鼠标经过停止计时器，鼠标离开继续定时器 clearInterval(定时器id)

注意事项：多次复用的代码需要封装函数

<!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>QQ音乐轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            width: 700px;
            margin: auto;
        }

        li {
            list-style: none;
        }

        ul.indicator {
            width: 700px;
            height: 80px;
            background-color: #000;
            display: flex;
            justify-content: space-evenly;
            padding: 10px 0;
        }

        .indicator li {
            display: block;
            position: relative;
            display: inline-block;
            width: 60px;
            height: 60px;
        }

        .indicator li img {
            width: 60px;
            height: 60px;
        }

        .container {
            position: relative;
        }

        .extra {
            position: absolute;
            bottom: 0;
            width: 700px;
            height: 53px;
            background-color: rgba(0, 0, 0, 0.8);

        }

        .extra p {
            font-size: 28px;
            color: #98e404;
            font-weight: 500;
            display: inline-block;
            padding-left: 20px;
            line-height: 53px;
        }

        .extra a {
            margin-top: 12px;
            float: right;
            line-height: 53px;
            width: 30px;
            height: 30px;
            background-image: url(./assets/icon_focus_switch.png);
            background-repeat: no-repeat;
        }

        .extra .prev {

            background-position: 0 0;
            margin-right: 10px;
        }

        .extra .next {
            margin-right: 20px;
            background-position: -60px 0;
        }

        .bigPicturArea {
            height: 320px;
        }

        li .mask {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.4);
            width: 60px;
            height: 60px;
            top: 0;
            left: 0;
        }

        .bigPicturArea {
            position: relative;
        }

        .bigPicturArea li {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all .3s;
        }

        .bigPicturArea li.active {
            opacity: 1;
        }

        li .mask.active {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <ul class="bigPicturArea">
                <li class='active'><img src="./assets/b_01.jpg" alt="" class="bigPicture active"></li>
                <li><img src="./assets/b_02.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_03.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_04.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_05.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_06.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_07.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_08.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_09.jpg" alt="" class="bigPicture"></li>
                <li><img src="./assets/b_10.jpg" alt="" class="bigPicture"></li>
            </ul>
            <div class="extra">
                <p class="descriptionOfGoods">这是第1张图片的说明</p>
                <a class="next" href="#"></a>
                <a class="prev" href="#"></a>
            </div>
        </div>
        <div class="indicaterContainer">
            <ul class="indicator">
                <li><img src="./assets/s_01.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_02.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_03.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_04.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_05.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_06.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_07.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_08.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_09.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li><img src="./assets/s_10.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
                    <span class="border"></span>
                </li>
            </ul>
        </div>
    </div>
    <script>
        let lis = document.querySelectorAll('.indicator li')
        let bigPictureLis = document.querySelectorAll('.bigPicturArea li')
        let spans = document.querySelectorAll('.indicator .mask')
        let descriptions = document.querySelector('p.descriptionOfGoods')
        let main = document.querySelector('.wrapper')


        //点击哪个导航图标就展示相应的图片
        let index = 0
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseenter', function () {
                for (let j = 0; j < lis.length; j++) {
                    bigPictureLis[j].classList.remove('active')
                    spans[j].classList.remove('active')
                }
                bigPictureLis[i].classList.add('active')
                spans[i].classList.add('active')
                descriptions.innerText = `这是第${i + 1}张图片描述`

                index = i

            })
        }

        //左右箭头动作
        let prev = document.querySelector('.extra .prev')
        let next = document.querySelector('.extra .next')
        next.addEventListener('click', () => {
            index++
            index = index % lis.length
            switchPicture()
        })
        prev.addEventListener('click', () => {
            index--
            if (index < 0) {
                index = lis.length - 1
            }
            switchPicture()
        })

        let switchPicture = function () {
            for (let j = 0; j < lis.length; j++) {
                bigPictureLis[j].classList.remove('active')
                spans[j].classList.remove('active')
            }
            bigPictureLis[index].classList.add('active')
            spans[index].classList.add('active')
            descriptions.innerText = `这是第${index + 1}张图片描述`
        }
        let timer = setInterval(() => {
            next.click()
        }, 1000);

        main.addEventListener('mouseenter', function () {
            clearInterval(timer)
        })

        main.addEventListener('mouseleave', function () {
            timer = setInterval(function () {
                // 自动调用右侧按钮的点击事件
                next.click()
            }, 1000)
        })

    </script>
</body>

</html>

Java script的webAPI中的scroll、offset、client三者相同与不同知识点