收藏
天蓬老师批改状态：合格
老师批语：
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>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;display: grid;grid-template-columns: repeat(3, 1fr);column-gap: 10px;}.container>img {width: 100%;border: 3px solid #fff;opacity: .6;}.container>img.active {opacity: 1;}.container>img:hover {opacity: 1;cursor: pointer;width: 105%;}body {width: 100%;height: 100vh;background-image: url(./bg.jpg);background-repeat: no-repeat;background-size: cover;}</style></head><body><div class="container"><!-- 图片列表 --><img src="./747267a8af60cdfb21d8b8d3785ce6e.png" alt=""><img src="./bg.jpg" alt=""><img src="./sz.jpg" alt=""></div></body></html>
<script>//事件代理 让父元素担当事件监听的职务，这样就可以代理所有img的点击事件了const imglist = document.querySelector('.container');//点击图片进行换肤imglist.onclick = (ev) => {//获取图片资源let imgUrl = `url(${ev.target.src})`;//将背景换成当前点击的图片，这样换肤成功document.body.style.backgroundImage = imgUrl;}</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
