<!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:0;padding:0;}
ul {list-style:none;}
#box{width:530px;height:auto;margin:0 auto;border:1px solid #ccc;overflow:hidden;}
.top{width:100%;height:33px;}
.top a {width:16px;height:16px;display:block;float:right;margin:5px;}
.btn-list-off{background:url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -38px 0px;}
.btn-car-on{background:url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -20px -33px;}
.btn-list-on{background:url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -21px 0px;}
.btn-car-off{background:url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -37px -32px;}
li{width:164px;height:auto;float:left;margin:5px 5px;border:1px solid #ccc;}
p a,p span{display:block;padding-left:10px;line-height:20px;}
p a{text-decoration:none;}
body{font-size:14px;font-family:"微软雅黑";}
.a-img{width:164px;height:164px;display:block;overflow:hidden;}
.bottom{background-color:#aaa;line-height:35px;height:35px;text-align:center;}
/* 制作静态网页的样式*/
.small{width:50px;height:50px;display:block;float:left;margin:5px;}
</style>
<script type="text/javascript">
// 使用JS实现，点击不同的按钮(卡片模式和列表模式)显示不同的模式。
window.onload=function(){
//获取按钮
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var imgs=document.getElementsByTagName('img');
btn1.onclick=function(){
//改变按钮的class
btn1.className="btn-list-on"; //反正我按一下btn1，就要把它开开，不管之前他是灰色的还是蓝色的，如果之前是灰的，现在点一下变蓝，如果之前就是蓝的，现在点一下还是蓝的，所以不用if判断
btn2.className="btn-car-off";
//改变每一个图片的路径以及它对应的父节点的class值
for(var i=0;i<imgs.length;i++){
imgs[i].src=" http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg";
imgs[i].parentNode.className="a-img small";
}
}
btn2.onclick=function(){
//改变按钮的class
btn2.className="btn-car-on";
btn1.className="btn-list-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";
}
}
}
</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>
everlose
2014-10-29
0 回答
举报
0/150
提交
取消
