信息列表效果：卡片、列表切换（HTML+CSS+JS案例）
2017-01-12 本文已影响275人
越IT
涉及知识点：HTML+CSS+JS DOM
案例效果：
列表模式-卡片模式互换.gif
案例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px;padding: 0px;}
body{font: "微软雅黑";font-size: 14px;}
a{text-decoration: none;}
ul{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://img.mukewang.com/53ab7e86000153cc00710057.jpg) no-repeat -38px 0px;}
.btn-car-on{background: #fff url(http://img.mukewang.com/53ab7e86000153cc00710057.jpg) no-repeat -21px -34px;}
.btn-list-on{background:#fff url(http://img.mukewang.com/53ab7e86000153cc00710057.jpg) no-repeat -21px 0px;}
.btn-car-off{background:#fff url(http://img.mukewang.com/53ab7e86000153cc00710057.jpg) no-repeat -38px -32px;}
#box ul li{
width: 164px;height:auto;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{display:block;width: 50px;height: 50px;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= "http://img.mukewang.com/53ab7cf4000196c000500050.jpg";
imgs[i].parentNode.className="a-img small";
}
}
carBtn.onclick = function(){
listBtn.className = "btn-list-off";
carBtn.className = "btn-car-on";
//改变每一个图片的路径以及它的对应的父节点的class的值
for(var i=0;i<imgs.length;i++)
{
imgs[i].src="http://img.mukewang.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">
</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">
</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">
</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">
</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">
</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">
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<div class="bottom">
未分组好友
</div>
</li>
</ul>
</div>
</body>
</html>
素材：
按钮地址: http://img.mukewang.com/53ab7e86000153cc00710057.jpg
小图: http://img.mukewang.com/53ab7cf4000196c000500050.jpg
大图:http://img.mukewang.com/53ab7d16000159a801640236.jpg
此案例学习视频源自：http://www.imooc.com/learn/62
