html最美观的卡片列表,信息列表效果：卡片、列表切换（HTML+CSS+JS案例）

涉及知识点：HTML+CSS+JS DOM

案例效果：

列表模式-卡片模式互换.gif

案例源码：

*{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;}

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[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[i].src="http://img.mukewang.com/53ab7d16000159a801640236.jpg";

imgs[i].parentNode.className = "a-img";

}

}

}