1、项目说明
根据这个小练习我们可以巩固之前学的HTML、CSS、JS的一些属性。
上图是我们需要设制作的TML、CSS页面,我们需要为上面四张小图设置点击事件,点击小图后我们整个页面背景就更换为哪张!
1.1、HTML
我们将整个页面分为四部分:页面背景、头部小图、LOGO、搜索框,详细代码如下:
<div class="skin"><img src=" " alt=""></div>
<!-- 头部 -->
<div class="top">
<ul class="top_img">
<li><img src="./img/small/525.jpg" alt=""></li>
<li><img src="./img/small/813.jpg" alt=""></li>
<li><img src="./img/small/829.jpg" alt=""></li>
<li><img src="./img/small/880.jpg" alt=""></li>
</ul>
</div>
<!-- logo -->
<div class="logo"></div>
<!-- search搜索框 -->
<div class="search"></div>
这是HTML页面结果,可以看出四张小图并没有按照横向排列,而且整个样式也没有达到我们所期待的结果,接下来我们设置CSS来改变样式达到我们所希望的页面。
1.2、CSS
(1)先设置最基础的操作
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
(2)要让小li取点前面的小圆点,需要设置list-style: none;
(3)需要设置float: left;让li里面的图片浮动起来,变成横向排列。
(4)我们这里LOGO以及搜索框均为图片比较好操作。
代码如下:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.skin {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #404040;
z-index: -10;
}
.skin img{
width: 100%;
height: 100%;
}
.top {
position: relative;
height: 200px;
width: 100%;
background-color: #FFF;
opacity: 0.87;
}
.top_img {
list-style: none;
margin: 0 auto;
width: 1040px;
height: 200px;
}
.top_img li {
width: 260px;
height: 163px;
margin-top: 18.5px;
float: left;
}
.top_img>img {
width: 100%;
height: 100%;
}
.logo {
width: 540px;
height: 258px;
margin: 50px auto;
background: url(../img/logo.png) no-repeat center center;
zoom: 0.5;
}
.search {
width: 641px;
height: 40px;
margin: 0 auto;
background: url(../img/search.png) no-repeat center center;
}
所得结果为最开始显示的图。
1.3JavaScript
实现思路:
利用for循环给每个li里面的img设置点击事件,点击哪个图片背景就显示哪个。
let skin_small = document.querySelector('.top_img').querySelectorAll('img');
let skin = document.querySelector('.skin').querySelector('img');
for (let i = 0; i < skin_small.length; i++) {
skin_small[i].onclick = function () {
//replace是将路径中 “small”变为“big”
skin.src=this.src.replace("small", "big");
}
}