学习来源:https://www.bilibili.com/video/BV1HJ41147DG
思路
- 给一组元素注册事件
- 给4个小图片利用循环注册点击事件
- 当我们点击了这个图片,让我们页面背景改为当前的图片
- 把当前图片的 src 路径取过来,给body做为背景即可
<!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>
* {
/* 清除内边距、外边距 */
margin: 0;
padding: 0;
/* 盒子大小为 width,padding和border不会撑大盒子 */
box-sizing: border-box;
}
img {
/* 清除图片边框,照顾低版本浏览器,如果图片外面包含了链接会有边框问题 */
border: 0;
/* 清除图片底侧有空白缝隙的问题 */
vertical-align: middle;
cursor: pointer;
width: 200px;
height: 125px;
border: 1px solid transparent;
}
.com {
width: 815px;
margin: 2% auto;
background-color: #fff;
text-align: center;
}
body {
background: no-repeat center top;
}
</style>
</head>
<body>
<div class="com">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
</div>
<script>
var imgS = document.getElementsByTagName('img');
for (var i = 0; i < imgS.length; i++) {
imgS[i].onclick = function () {
for (var i = 0; i < imgS.length; i++) {
imgS[i].style = '';
}
this.style.borderColor = 'red';
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
版权声明:本文为qq_45645902原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。