前端html，css 样式巩固1

想做这样一个效果点击图片切换当前的选中图片

我们使用原生的js html 来开发这个

直接粘贴代码

相信大家都能看懂的

<!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>@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');* {box-sizing: border-box;}body {font-family: 'Muli', sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;}.container {display: flex;width: 90vw;}.panel {background-size: cover;background-position: center;background-repeat: no-repeat;height: 80vh;border-radius: 50px;color: #fff;cursor: pointer;flex: 0.5;margin: 10px;position: relative;-webkit-transition: all 700ms ease-in;}.panel h3 {font-size: 24px;position: absolute;bottom: 20px;left: 20px;margin: 0;opacity: 0;}.panel.active {flex: 5;}.panel.active h3 {opacity: 1;transition: opacity 0.5s ease-in 0.4s;}@media (max-width: 480px) {.container {width: 100vw;}.panel:nth-of-type(4),.panel:nth-of-type(5) {display: none;}}</style>
</head><body><div class="container"><div class="panel active"style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80')"><h3>Explore The World</h3></div><div class="panel"style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80')"><h3>Wild Forest</h3></div><div class="panel"style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1353&amp;q=80')"><h3>Sunny Beach</h3></div><div class="panel"style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1351&amp;q=80')"><h3>City on Winter</h3></div><div class="panel"style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80')"><h3>Mountains - Clouds</h3></div></div><script>const panels = document.querySelectorAll(".panel")panels.forEach(panel => {panel.addEventListener("click", () => {removeActiveClassess()panel.classList.add("active")})})function removeActiveClassess() {panels.forEach(panel => {panel.classList.remove("active")})}</script></body></html>

  <script>const panels = document.querySelectorAll(".panel")panels.forEach(panel => {panel.addEventListener("click", () => {removeActiveClassess()panel.classList.add("active")})})function removeActiveClassess() {panels.forEach(panel => {panel.classList.remove("active")})}</script>

这个是重点代码需要点击事件如果小伙伴经常不写js 代码可能就不会写了再复习一下把

这个就是全部代码

大家可以体验一下看一下详细代码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/452166.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！