Html5 js實(shí)現(xiàn)手風(fēng)琴效果
使用H5實(shí)現(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)簽添加點(diǎn)擊事件 lis[i].onclick = function () { //將所有的圖片寬度設(shè)置為0 for(var i = 0; i < lis.length; i++) { imgs[i].style.width = "0px"; } //將當(dāng)前點(diǎn)擊li標(biāo)簽中的img標(biāo)簽設(shè)置寬度為220px this.querySelector("img").style.width = "220px"; } } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 純js實(shí)現(xiàn)手風(fēng)琴效果代碼
- 使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- js實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果
- 原生js做的手風(fēng)琴效果的導(dǎo)航菜單
- Vue.js手風(fēng)琴菜單組件開(kāi)發(fā)實(shí)例
- js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果
- 純js實(shí)現(xiàn)手風(fēng)琴效果
- JS實(shí)現(xiàn)圖片手風(fēng)琴效果
- 原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
- js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果
相關(guān)文章
JS數(shù)組返回去重后數(shù)據(jù)的方法解析
本文主要分享了Js數(shù)組返回去重后的數(shù)據(jù)的實(shí)例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01JavaScript 正則應(yīng)用詳解【模式、欲查、反向引用等】
這篇文章主要介紹了JavaScript 正則應(yīng)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 正則表達(dá)式模式、欲查、反向引用等相關(guān)概念、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05JS+CSS實(shí)現(xiàn)TreeMenu二級(jí)樹(shù)形菜單完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)TreeMenu二級(jí)樹(shù)形菜單,以完整實(shí)例形式較為詳細(xì)的分析了JS二級(jí)樹(shù)形菜單的節(jié)點(diǎn)元素操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04css和js實(shí)現(xiàn)彈出登錄居中界面完整代碼
這篇文章主要介紹了css和js實(shí)現(xiàn)彈出登錄居中界面,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11微信小程序用戶(hù)授權(quán),以及判斷登錄是否過(guò)期的方法
這篇文章主要介紹了微信小程序用戶(hù)授權(quán)及判斷登錄是否過(guò)期,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05微信小程序wx.getUserInfo授權(quán)獲取用戶(hù)信息(頭像、昵稱(chēng))的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶(hù)信息(頭像、昵稱(chēng))的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JavaScript 快捷鍵設(shè)置實(shí)現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03