<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shoufengqin</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
div{
margin-left: 100px;
margin-top: 100px;
width: 500px;
height: 200px;
border: 2px solid red;
}
ul{
overflow: hidden;
height: 200px;
}
li{
float: left;
height: 200px;
list-style: none;
}
h3{
float: left;
width: 50px;
height: 200px;
border: 2px solid blue;
}
img{
width: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<ul>
<li><h3>1</h3><img src="images/03.jpg"></li>
<li><h3>2</h3><img src="images/4.jpg"></li>
<li><h3>3</h3><img src="images/6.jpg"></li>
<li><h3>4</h3><img src="images/7.jpg"></li>
<li><h3>5</h3><img src="images/6.jpg"></li>
<li><h3>6</h3><img class="img" src=""></li>
</ul>
</div>
<script type="text/javascript">
var lis = document.querySelectorAll("li");
var imgs = document.querySelectorAll("img");
for(i = 0;i < lis.length;i++){
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
imgs[i].style.width = "0px";
}
this.querySelector("img").style.width = "200px";
}
}
</script>
</body>
</html>
手风琴
猜你喜欢
转载自www.cnblogs.com/Longhua-0/p/9124224.html
今日推荐
周排行