The use of varying width
Screenshot
Undeployed
when expanded
HTML part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴测试（宽度变化）</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<ul>
<!-- <li><img src="image/Ariana%20Grande.jpg"><div class="title_div">Ariana Grande</div></li>
<li><img src="image/Avril%20Lavigne.jpg"><div class="title_div">Avril Lavigne</div></li>
<li><img src="image/Taylor%20Swift.jpg"><div class="title_div">Taylor Swift</div></li>
<li><img src="image/Selena%20Gomez.jpg"><div class="title_div">Selena Gomez</div></li>
<li><img src="image/G.E.M.%20邓紫棋.jpg"><div class="title_div">G.E.M. 邓紫棋</div></li>
<li><img src="image/Justin%20Bieber.jpg"><div class="title_div">Justin Bieber</div></li>
<li><img src="image/dog.jpg"><div class="title_div">狗</div></li>
<li><img src="image/1.jpg"><div class="title_div">船</div></li>-->
<li><img src="image/Ariana%20Grande.jpg"></li>
<li><img src="image/Avril%20Lavigne.jpg"></li>
<li><img src="image/Taylor%20Swift.jpg"></li>
<li><img src="image/Selena%20Gomez.jpg"></li>
<li><img src="image/G.E.M.%20邓紫棋.jpg"></li>
<li><img src="image/Justin%20Bieber.jpg"></li>
<li><img src="image/dog.jpg"></li>
<li><img src="image/1.jpg"></li>
</ul>
<!--<div class="right_box"><img src="image/1.jpg"></div>-->
</div>
</body>
</html>
CSS section
*{
margin: 0;
padding: 0;
}
.container{ /*容器*/
width: 1200px;
height: 400px;
position: relative;
margin: 100px auto;
background-color: darkgrey;
/*overflow:hidden;*/
}
.container ul {
list-style: none;
}
.container ul li{
z-index: 5;
width: 150px;
height: 400px;
float: left;
overflow: hidden;
/*transition:1s;*/ /*加过渡有bug*/
}
.container ul li img{
height: 400px;
width: 598px;
}
.container ul li .title_div{ /*下面标题*/
font-size: 15px;
text-align: center;
position: absolute;
width: 100px;
height:0px;
background-color: #ffcf32;
line-height: 30px;
left:0px;
}
.container ul li:hover .title_div{
height: 30px;
}
JS part
window.onload=function () {
var img_box=document.getElementsByTagName("li");
for (var i=0;i<8;i++){ /*即时调用函数写法*/
(function (i) {
img_box[i].onmouseover=function () {
img_box[i].style.width=598+"px";
for (var a=0;a<8;a++){
if(a!=i){ /*除了被选中的图片 其他图片宽度都减小*/
img_box[a].style.width=86+"px";
}
}
}
img_box[i].onmouseout=function () {
for(var b=0;b<8;b++){
img_box[b].style.width=150+"px"; /*当鼠标移出时 所有图片恢复到初始状态*/
}
}
})(i);
}
}
