武汉大学人民医院属于哪个街道_最新网页传奇游戏_品牌推广方式_2023广东又开始疫情了吗

文章目录

1、案例：电梯导航
- 1.1 需求分析与实现
- 1.2 关键思路梳理
2、属性选择器补充

1、案例：电梯导航

1.1 需求分析与实现

需求：点击不同的模块，页面可以自动跳转不同的位置

模块分析:

页面滚动到对应位置，导航显示，否则隐藏模块
点击导航对应小模块，页面会跳到对应大模块位置
页面滚动到对应位置，电梯导航对应模块自动发生变化

//.....html见文章关联压缩包</div></div></div><!-- 电梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鲜好物</a></li><li><a href="javascript:;" data-name="popular">人气推荐</a></li><li><a href="javascript:;" data-name="brand">热门品牌</a></li><li><a href="javascript:;" data-name="topic">最新专题</a></li><li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li></ul></div><script>// 每做完一个功能，用立即执行函数封装下，防止变量污染// 需求1、实现页面滚动到对应的位置，电梯导航显示，否则隐藏(function () {const elevator = document.querySelector('.xtx-elevator')// 大盒子2const entry = document.querySelector('.xtx_entry')window.addEventListener('scroll', function () {const n = document.documentElement.scrollTopif (n >= entry.offsetTop) {elevator.style.opacity = 1  // opacity即淡入淡出，温柔版的display} else {elevator.style.opacity = 0}// elevator.style.opacity = n >= 300 ? 1 : 0})})();// 需求2、实现点击⬆️，返回顶部(function () {const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {//document.documentElement.scrollTop = 0window.scrollTo(0, 0)})})();// 需求3、实现点击电梯导航每一楼，跳转到对应的位置并且电梯导航对应楼层高亮(function () {const list = document.querySelector('.xtx-elevator-list')// 事件委托，不给每一个li绑定事件，给li的父元素ul绑定list.addEventListener('click', function (e) {// 导航栏的一楼 返回顶部，不参与这个需求，自己有返回顶部功能if (e.target.tagName === 'A' && e.target.dataset.name) {const old = document.querySelector('.xtx-elevator-list .active')// 刚开始，没有人高亮选中，if (null)就是falseif (old) {old.classList.remove('active')}// 被点击的当前楼层高亮e.target.classList.add('active')// 实现点击电梯对应楼层，跳转对应位置，其实就是把html滚动的scrollTop改成对应盒子的offsetTopconst className = e.target.dataset.name// 选出对应的大盒子const bigDiv = document.querySelector(`.xtx_goods_${className}`)// 让页面滚动document.documentElement.scrollTop = bigDiv.offsetTop}})// 需求4、实现页面滚动到对应的位置，对应的电梯导航那一项就高亮（根据大盒子选择小盒子）window.addEventListener('scroll', function () {// 先移除已有的高亮const old = document.querySelector('.xtx-elevator-list .active')// 刚开始，没有人高亮选中，if (null)就是falseif (old) {old.classList.remove('active')}// 当页面的scrollTop大于等于div大盒子1的offsetTop，并且小于等于div大盒子2的offsetTop，那就是滑动到对应的div1了const news = document.querySelector('.xtx_goods_new')         //新鲜好物大盒子const popular = document.querySelector('.xtx_goods_popular')  //人气推荐大盒子const brand = document.querySelector('.xtx_goods_brand')      //热门品牌大盒子const topic = document.querySelector('.xtx_goods_topic')      //最新专题大盒子const scrollTop = document.documentElement.scrollTopif (scrollTop >= news.offsetTop && scrollTop < popular.offsetTop) {// 属性选择器选择电梯的对应的那一楼document.querySelector('[data-name=new]').classList.add('active')} else if (scrollTop >= popular.offsetTop && scrollTop < brand.offsetTop) {document.querySelector('[data-name=popular]').classList.add('active')} else if (scrollTop >= brand.offsetTop && scrollTop < topic.offsetTop) {document.querySelector('[data-name=brand]').classList.add('active')} else if (scrollTop >= topic.offsetTop) {document.querySelector('[data-name=topic]').classList.add('active')}})})();</script></body></html>

效果：

电梯导航栏效果

1.2 关键思路梳理

每个功能点，写完后可以放到自执行函数里面，防止变量污染
实现页面滚动到对应的位置，电梯导航显示，否则隐藏，本质上是html页面的scrollTop和你需要的元素的offsetTop的大小比较
回到顶部，即document.documentElement.scrollTop = 0
点击电梯的每一层，跳转到对应的大盒子，使用事件委托最好，不然得给每一层绑定点击事件，而这个跳转，则是通过让html滚动的scrollTop改成对应盒子的offsetTop实现，可以看到，电梯每一层的对象的自定义属性，和其对应的div大盒子的类选择器名字有关系，由此，可以通过电梯每一层的小盒子找到其对应的大盒子，这是自定义属性的一个运用

在这里插入图片描述

最后一个，实现页面滚动到对应的位置，对应的电梯导航那一项就高亮，实际就是根据大盒子选择小盒子，思路是：当页面滚动了，先移除所有小li 里面a 的状态 active 防止有多个 active，再获取所有的大盒子，判断页面滚动的距离document.documentElement.scrollTop，和每一个div大盒子offsetTop的大小关系，从而锁定页面现在滑动到哪儿了，再给对应的电梯的那一楼添加active样式即可

2、属性选择器补充

如下，有两个input标签，使用属性选择器选择其中一个input标签：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选择type属性是text的input标签 */input[type=text] {color: red;}/* 选择有value属性的input标签 */input[value] {color: red;}</style>
</head><body><input type="text" value="123" data-id="0" data-name="tom"><input type="password"><script>// 属性选择器，用自定义属性const input = document.querySelector('input[value]')console.log(input.dataset)console.log(input.dataset.name)</script>
</body></html>

效果：

在这里插入图片描述
自定义属性的使用：