<!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>选项卡</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.nav {display: flex;}.nav li {margin-bottom: 0;width: 100px;height: 50px;text-align: center;line-height: 50px;}.content {background-color: red;width: 100%;display: none;height: 150px;}.active {display: block;background-color: red;}</style></head><body><div style="width: 300px"><ul class="nav"><li data-index="1" class="active">动漫</li><li data-index="2">电视剧</li><li data-index="3">电影</li></ul><ul class="content active" data-index="1"><li>火影忍者</li><li>斗罗大陆</li><li>斗破苍穹</li></ul><ul class="content" data-index="2"><li>对不起我爱你</li><li>天龙八部</li><li>神雕侠侣</li></ul><ul class="content" data-index="3"><li>金瓶梅</li><li>3D肉蒲团</li><li>蜜桃成熟时</li></ul></div><script>let nav = document.querySelector(".nav");let c = nav.children;let d = document.querySelectorAll(".content");let b = (nav.onmouseover = function (ev) {let a = ev.target;[...c].forEach((item) => item.classList.remove("active"));a.classList.add("active");[...d].filter(function (n) {n.classList.remove("active");if (n.dataset.index == a.dataset.index) {n.classList.add("active");}});});</script></body></html>
<!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>选项卡</title><style>.container {height: 2000px;}.container > img {position: absolute;top: 1000px;}</style></head><body><div class="container"><img data-src="huoying.jpg" alt="" /></div><script>//获取图片元素let imgs = document.querySelector(".container > img");// 元素相对于可视区的位置// let rect = imgs.getBoundingClientRect();// 窗口可视区高度let viewLight = window.innerHeight;window.onscroll = function () {if (imgs.getBoundingClientRect().top < viewLight) {imgs.src = imgs.dataset.src;}};</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
