<!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
提交
取消
