                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息排列效果

每張圖片的地址都不一樣怎么破

<!DOCTYPE html>

<html>

<head>

*{margin: 0;padding: 0;}

ul{list-style: none;}

body{font-family: "微軟雅黑";

font-size: 14px;}

a{text-decoration: none;}

/*圖片可能有多張,高度設(shè)自動(dòng)*/

#box{height: auto;width: 550px;border: 1px solid #aaa; margin:0 auto;

overflow: hidden;

}

.top{height: 40px;}

.top a{

????height: 16px; width: 16px;border:1px solid #abcdef;

????display: block; float: right;margin: 5px;}

???? .btn-list-off{background:#fff url(./img/log.png)no-repeat 69% 0%;}

???? .btn-car-on{background:#fff url(./img/log.png)no-repeat 36% 80%;}

???? .btn-list-on{background:#fff url(./img/log.png)no-repeat -21px -0px;}

???? .btn-car-off{background:#fff url(./img/log.png)no-repeat -38px -32px;}

????#box ul li{height: 236px; width: 164px;border:1px solid #aaa;

????float: left;

????margin: 5px;

????/*重設(shè)高度*/

height: auto;

}

.a-img{height:164px;width: 164px;

/*內(nèi)聯(lián)元素必須設(shè)置成塊級(jí)元素才能設(shè)定尺寸*/

display: block;

/*超出a的部分直接隱藏*/

overflow: hidden;

}

p a,p span{display: block;line-height: 23px;

padding-left: 10px;}

/*底部div*/

.bottom{height: 40px; line-height: 40px;

text-align: center;

background: #ccc;

}

/*增加small類*/

.small{height: 50px; width: 50px;

display: block;

float: left;

margin:5px;

}

</style>

</head>

<body>

<div>

</div>

<ul>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

</ul>

</div>

</body>

window.onload=function(){

//A.1.獲取列表和卡片模式的按鈕

var listBtn = document.getElementById("btn1");

var carBtn = document.getElementById("btn2");

var imgs = document.getElementsByTagName("img");

//A.2.綁定事件

listBtn.onclick =function(){

// A.2.1.(修改class值)

listBtn.className = "btn-list-on";

carBtn.className = "btn-car-off";

// A.2.2.改變img圖片路徑以及對(duì)應(yīng)的父節(jié)點(diǎn)(a)的class.先遍歷獲取的img

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/small.png";

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

}

// B.

carBtn.onclick = function(){

listBtn.className = "btn-list-off";

carBtn.className = "btn-car-on";

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/big.png";

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

}

<!DOCTYPE html>

<html>

<head>

*{margin: 0;padding: 0;}

ul{list-style: none;}

body{font-family: "微軟雅黑";

font-size: 14px;}

a{text-decoration: none;}

/*圖片可能有多張,高度設(shè)自動(dòng)*/

#box{height: auto;width: 550px;border: 1px solid #aaa; margin:0 auto;

overflow: hidden;

}

.top{height: 40px;}

.top a{height: 16px; width: 16px;border:1px solid #abcdef;

display: block; float: right;margin: 5px;}

.btn-list-off{background:#fff url(./img/log.png)no-repeat 69% 0%;}

.btn-car-on{background:#fff url(./img/log.png)no-repeat 36% 80%;}

.btn-list-on{background:#fff url(./img/log.png)no-repeat -21px -0px;}

.btn-car-off{background:#fff url(./img/log.png)no-repeat -38px -32px;}

#box ul li{height: 236px; width: 164px;border:1px solid #aaa;

float: left;

margin: 5px;

/*重設(shè)高度*/

height: auto;}

.a-img{height:164px;width: 164px;

/*內(nèi)聯(lián)元素必須設(shè)置成塊級(jí)元素才能設(shè)定尺寸*/

display: block;

/*超出a的部分直接隱藏*/

overflow: hidden;

}

p a,p span{display: block;line-height: 23px;

padding-left: 10px;}

/*底部div*/

.bottom{height: 40px; line-height: 40px;

text-align: center;

background: #ccc;

}

/*增加small類*/

.small{height: 50px; width: 50px;

display: block;

float: left;

margin:5px;

}

</style>

</head>

<body>

<div>

</div>

<ul>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

</p>

</div>

<div>未分組的好友</div>

</li>

</ul>

</div>

</body>

window.onload=function(){

//A.1.獲取列表和卡片模式的按鈕

var listBtn = document.getElementById("btn1");

var carBtn = document.getElementById("btn2");

var imgs = document.getElementsByTagName("img");

//A.2.綁定事件

listBtn.onclick =function(){

// A.2.1.(修改class值)

listBtn.className = "btn-list-on";

carBtn.className = "btn-car-off";

// A.2.2.改變img圖片路徑以及對(duì)應(yīng)的父節(jié)點(diǎn)(a)的class.先遍歷獲取的img

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/small.png";

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

}

// B.

carBtn.onclick = function(){

listBtn.className = "btn-list-off";

carBtn.className = "btn-car-on";

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/big.png";

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

}

</script>

</html>

<!-- 筆記?

a中的圖片的設(shè)置了固定尺寸,防止遮蓋?

A.1.給按鈕添加id-->

這是源碼,老師的教程里就兩張圖片big.png和small.png進(jìn)行切換.實(shí)際開發(fā)中如果每張圖片的地址都不一樣那怎么辦？

是利用傳參嗎？具體怎么實(shí)現(xiàn)

12只怕有心人

2016-11-22

源自：信息排列效果

關(guān)注問(wèn)題我要回答

1371

操作

收起

舉報(bào)

0/150

提交

取消

信息排列效果

參與學(xué)習(xí) 31758 人
解答問(wèn)題 170 個(gè)

大咖教您節(jié)約網(wǎng)頁(yè)空間的方法，快速學(xué)會(huì)信息排列效果的制作

進(jìn)入課程

每張圖片的地址都不一樣怎么破

我要回答關(guān)注問(wèn)題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

每張圖片的地址都不一樣怎么破

每張圖片的地址都不一樣怎么破