...-慕课网

                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息排列效果

<!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-family: "微软雅黑"; font-size: 14px;}
ul{ list-style: none;}
a{ text-decoration: 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(images/spider.png) no-repeat -16px 0px;}
.btn-car-on{ background: #fff url(images/spider.png) no-repeat 0px -16px;}
.btn-list-on{ background: #fff url(images/spider.png) no-repeat 0px -0px;}
.btn-car-off{ background: #fff url(images/spider.png) no-repeat -16px -16px;}
#box ul li{height:auto; width: 164px;  border: 1px solid #aaa; float: left; margin: 5px;}
.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; display: block; float: left; margin: 5px;}
</style>
<script type="text/javascript">
window.onload=function(){
//获取按钮
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 = "./images/small.png";
imgs[i].parentNode.className = "a-img small";
}
}
carBtn.onclick = function(){
//改变按钮的class值
listBtn.className = "btn-list-off";
carBtn.className = "btn-car-on";
//改变每一个图片的路径以及它对应的父节点的class值
for (var i = 0; i < imgs.length; i++) {
imgs[i].src = "./images/big.png";
imgs[i].parentNode.className = "a-img";
}
}
}
</script>
</head>
<body>
<div id="box">
<div>
<a href="#" title="列表模式" id="btn1"></a>
<a href="#" title="卡片模式" id="btn2"></a>
</div>
<ul>
<li>
<div>
<a href="#">
<img src="images/big.png">
</a>
<p>
<a href="#">妞妞</a>
<span>辽宁</span>
<span>8个共同好友</span>
</p>
</div>
<div>未分组的好友</div>
</li>
<li>
<div>
<a href="#">
<img src="images/big.png">
</a>
<p>
<a href="#">妞妞</a>
<span>辽宁</span>
<span>8个共同好友</span>
</p>
</div>
<div>未分组的好友</div>
</li>
<li>
<div>
<a href="#">
<img src="images/big.png">
</a>
<p>
<a href="#">妞妞</a>
<span>辽宁</span>
<span>8个共同好友</span>
</p>
</div>
<div>未分组的好友</div>
</li>
<li>
<div>
<a href="#">
<img src="images/big.png">
</a>
<p>
<a href="#">妞妞</a>
<span>辽宁</span>
<span>8个共同好友</span>
</p>
</div>
<div>未分组的好友</div>
</li>
<li>
<div>
<a href="#">
<img src="images/big.png">
</a>
<p>
<a href="#">妞妞</a>
<span>辽宁</span>
<span>8个共同好友</span>
</p>
</div>
<div>未分组的好友</div>
</li>
<li>
<div>
<a href="#">
<img src="images/big.png">
</a>
<p>
<a href="#">妞妞</a>
<span>辽宁</span>
<span>8个共同好友</span>
</p>
</div>
<div>未分组的好友</div>
</li>
</ul>
</div>
</body>
</html>