Html5 js實現(xiàn)手風(fēng)琴效果
更新時間：2020年04月17日 16:12:33 作者：安靜的對折
這篇文章主要為大家詳細(xì)介紹了Html5 js實現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用H5實現(xiàn)橫向的手風(fēng)琴功能，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 522px;
height: 222px;
margin: 50px auto;
border: 1px solid red;
box-sizing: border-box;
box-sizing: border-box;
}
ul {
overflow: hidden;
height: 222px;
}
li {
float: left;
height: 222px;
list-style: none;
box-sizing: border-box;
}
h3 {
width: 50px;
float: left;
height: 222px;
border: 1px solid green;
box-sizing: border-box;
}
img {
width: 0px;
float: left;
}
.img {
width: 220px;
}
</style>
</head>
<body>
<div>
<ul>
<li><h3>1</h3><img src="images/01.jpg" alt=""/></li>
<li><h3>2</h3><img src="images/02.jpg" alt=""/></li>
<li><h3>3</h3><img src="images/03.jpg" alt=""/></li>
<li><h3>4</h3><img src="images/04.jpg" alt=""/></li>
<li><h3>5</h3><img src="images/01.jpg" alt=""/></li>
<li><h3>6</h3><img class="img" src="images/02.jpg" alt=""/></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll("li");
var imgs = document.querySelectorAll("img");
for(var i = 0; i < lis.length; i++) {
//給所有的li標(biāo)簽添加點擊事件
lis[i].onclick = function () {
//將所有的圖片寬度設(shè)置為0
for(var i = 0; i < lis.length; i++) {
imgs[i].style.width = "0px";
}
//將當(dāng)前點擊li標(biāo)簽中的img標(biāo)簽設(shè)置寬度為220px
this.querySelector("img").style.width = "220px";
}
}
</script>
</body>
</html>
下載鏈接：H5實現(xiàn)手風(fēng)琴
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
typeof 在js中typeof是檢查類型的,在ts中也有這個功能,下面這篇文章主要給大家介紹了關(guān)于TypeScript基本類型之typeof和keyof的相關(guān)資料,需要的朋友可以參考下2023-04-04
BootStrap實現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時自動折疊隱藏）
這篇文章主要介紹了BootStrap實現(xiàn)導(dǎo)航欄的響應(yīng)式布局，當(dāng)在小屏幕、手機(jī)屏幕瀏覽時自動折疊隱藏的效果，非常不錯，具有參考借鑒價值,對bootstrap 響應(yīng)式布局導(dǎo)航欄功能感興趣的朋友一起學(xué)習(xí)吧2016-11-11
這篇文章主要介紹了JavaScript 判斷瀏覽器是否是IE，幫助大家更好的理解和學(xué)習(xí)前端知識，感興趣的朋友可以了解下2021-02-02
用js來生成隨機(jī)彩票號碼清單...2007-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__，深入學(xué)習(xí)了三個用來訪問prototype的方法，感興趣的小伙伴們可以參考一下2015-11-11
基于Bootstrap實現(xiàn)下拉菜單項和表單導(dǎo)航條(兩個菜單項，一個下拉菜單和登錄表單導(dǎo)航條)
這篇文章主要介紹了基于Bootstrap實現(xiàn)下拉菜單項和表單導(dǎo)航條(兩個菜單項，一個下拉菜單和登錄表單導(dǎo)航條)的相關(guān)資料,需要的朋友可以參考下2016-07-07
細(xì)品javascript 尋址,閉包,對象模型和相關(guān)問題
似乎某些程序員的集合是不相交的，就好像JS程序員和玩編譯原理和CPU指令的匯編程序員就幾乎沒有交叉。前些日子討論的火熱的“作用域鏈”問題，說白了就是尋址問題，不過，這個在C中十分簡單的問題卻被JS這個動態(tài)語言弄得很復(fù)雜。2009-04-04
這篇文章主要介紹了JS變量提升,結(jié)合實例形式分析了JS變量提升基本概念、功能、原理、用法及相關(guān)注意事項,需要的朋友可以參考下2020-05-05
由于在沒有規(guī)劃好的情況下寫的這個代碼，寫的比較粗糙，也沒有添加注釋。 JavaScript代碼和HTML完全分離；可以隨意添加多個子div標(biāo)簽，自動擴(kuò)展2009-07-07