<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font:"微软雅黑";font-size:14px;}
a{text-decoration:none;}
ul,li{list-style:none;}
#box{height:auto;width:550px;border:1px solid #aaa;margin:0 auto;overflow:hidden;}
.top{height:40px;}
.top a{height:16px; width:16px;display:block;float:right;margin:5px;}
.btn-list-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px 0px;}
.btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px -34px;}
.btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px 0px;}
.btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px -32px;}
#box ul li{height:auto;width:164px;border:1px solid #aaa;float:left;margin:7px;}
.a-img{height:164px;width:164px;display:block;overflow:hidden;}
p a,p span{
display:block;
line-height:23px;
padding-left:10px;
}
.bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;}
.small{height:50px;width:50px;float:left;margin:5px;}
</style>
<script type="text/javascript">
// 添加页面加载完成时的事件,然后执行以下代码。
var listBtn = document.getElementById("btn1");
var carBtn = document.getElementById("btn2");
// 获取多个图片对象
var imgs = document.getElementsByTagName("img");
listBtn.onclick = function(){
// 改变按钮的class的值
listBtn.className = "btn-list-on";
carBtn.className = "btn-car-off";
// 改变每一个图片的路径以及它的对应的父节点的class的值
for(var i=0;i<imgs.length;i++){
imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"
imgs[i].parentNode.className = "a-img small";
}
}
carBtn.onclick = function(){
listBtn.className = "btn-list-off";
carBtn.className = "btn-car-on";
for(var i=0;i<imgs.length;i++)
{
imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
imgs[i].parentNode.className = "a-img";
}
}
</script>
</head>
<body>
<div id="box">
<div class="top">
<a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
<a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
</div>
<ul>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
</a>
<p>
<a href="#">白阳</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组的好友
</div>
</li>
<li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白阳</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白阳</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组的好友
</div>
</li>
<li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白阳</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白阳</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">白阳</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组的好友
</div>
</li>
</ul>
</div>
</body>
</html>
