JavaScript實(shí)現(xiàn)手風(fēng)琴效果
更新時(shí)間：2021年02月18日 08:05:05 作者：~噓~禁止想象~
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)手風(fēng)琴效果的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
text-align: center;
}
ul li {
list-style: none;
overflow: hidden;
display: inline-block;
transition: all 1s;
}
</style>
</head>
<body>
<ul>
</ul>
<script>
var ul = document.querySelector("ul");
var imgs = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg", ];
for (var i = 0; i < imgs.length; i++) {
var li = document.createElement("li");
var img = document.createElement("img");
img.src = imgs[i];
li.appendChild(img);
ul.appendChild(li);
}
var lis = document.querySelectorAll("li");
window.onload = window.onresize = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
var imgM = document.querySelectorAll("img");
for (let i = 0; i < imgM.length; i++) {
imgM[i].onmouseenter = function() {
for (var j = 0; j < imgM.length; j++) {
lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";
}
lis[i].style.width = imgM[i].offsetWidth + "px";
}
imgM[i].onmouseleave = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 純js實(shí)現(xiàn)手風(fēng)琴效果代碼
- 原生js做的手風(fēng)琴效果的導(dǎo)航菜單
- 使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
- js實(shí)現(xiàn)簡單的手風(fēng)琴效果
- js實(shí)現(xiàn)可折疊展開的手風(fēng)琴菜單效果
- 純js實(shí)現(xiàn)手風(fēng)琴效果
- 原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
- 炫酷的js手風(fēng)琴效果
- JS實(shí)現(xiàn)圖片手風(fēng)琴效果
相關(guān)文章
bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能
bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動(dòng)的，有時(shí)滿足不了個(gè)性化的需求，需要做一個(gè)類似于android drawerLayout 側(cè)滑的菜單，這就是我要實(shí)現(xiàn)的bootstrap自定義側(cè)滑菜單。接下來通過本文給大家介紹bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能，感興趣的朋友一起看看吧2018-09-09
這篇文章主要介紹了javascript異步編程的六種方式總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要分享了js獲取標(biāo)簽元素data-*屬性值的4種方法，標(biāo)簽上有兩個(gè)屬性??data-id????和???data-user-name??,?需要通過js去獲取，下面文章具體介紹需要的小伙伴可以參考一下2022-06-06
在進(jìn)入正題前，我們看一下瀏覽器對(duì)于鍵盤的一些默認(rèn)事件，這有助于我們用javascript截獲鍵盤事件。2009-12-12
這篇文章主要為大家詳細(xì)介紹了JS微信搖一搖的實(shí)現(xiàn)原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
javascript結(jié)合Flexbox簡單實(shí)現(xiàn)滑動(dòng)拼圖游戲
本文給大家分享的是一則使用javascript結(jié)合Flexbox簡單實(shí)現(xiàn)滑動(dòng)拼圖游戲的代碼，雖然沒有實(shí)現(xiàn)完整的功能，但是還是推薦給大家，喜歡的朋友可以繼續(xù)做完2016-02-02
js監(jiān)聽鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁面
這篇文章主要介紹了js監(jiān)聽鼠標(biāo)點(diǎn)擊(onmousedown)和鍵盤點(diǎn)擊(onkeydown)事件并自動(dòng)跳轉(zhuǎn)頁面，很簡單的一個(gè)實(shí)現(xiàn)2014-09-09
js實(shí)現(xiàn)window.open不被攔截的解決方法匯總
這篇文章主要介紹了js實(shí)現(xiàn)window.open不被攔截的解決方法,實(shí)例匯總了常用的不被攔截的解決方法,需要的朋友可以參考下2014-10-10
JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼
本文給大家分享JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-06-06
css+js實(shí)現(xiàn)部分區(qū)域高亮可編輯遮罩層
下面介紹我在項(xiàng)目中實(shí)現(xiàn)的方式，全屏遮罩，部分區(qū)域可操作,需要的朋友可以參考下2014-03-03