JavaScript實現(xiàn)手風(fēng)琴效果
更新時間：2021年02月18日 08:05:05 作者：~噓~禁止想象~
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap自定義樣式之bootstrap實現(xiàn)側(cè)邊導(dǎo)航欄功能
bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動的，有時滿足不了個性化的需求，需要做一個類似于android drawerLayout 側(cè)滑的菜單，這就是我要實現(xiàn)的bootstrap自定義側(cè)滑菜單。接下來通過本文給大家介紹bootstrap實現(xiàn)側(cè)邊導(dǎo)航欄功能，感興趣的朋友一起看看吧2018-09-09
這篇文章主要介紹了javascript異步編程的六種方式總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要分享了js獲取標(biāo)簽元素data-*屬性值的4種方法，標(biāo)簽上有兩個屬性??data-id????和???data-user-name??,?需要通過js去獲取，下面文章具體介紹需要的小伙伴可以參考一下2022-06-06
在進(jìn)入正題前，我們看一下瀏覽器對于鍵盤的一些默認(rèn)事件，這有助于我們用javascript截獲鍵盤事件。2009-12-12
這篇文章主要為大家詳細(xì)介紹了JS微信搖一搖的實現(xiàn)原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
javascript結(jié)合Flexbox簡單實現(xiàn)滑動拼圖游戲
本文給大家分享的是一則使用javascript結(jié)合Flexbox簡單實現(xiàn)滑動拼圖游戲的代碼，雖然沒有實現(xiàn)完整的功能，但是還是推薦給大家，喜歡的朋友可以繼續(xù)做完2016-02-02
js監(jiān)聽鼠標(biāo)點擊和鍵盤點擊事件并自動跳轉(zhuǎn)頁面
這篇文章主要介紹了js監(jiān)聽鼠標(biāo)點擊(onmousedown)和鍵盤點擊(onkeydown)事件并自動跳轉(zhuǎn)頁面，很簡單的一個實現(xiàn)2014-09-09
js實現(xiàn)window.open不被攔截的解決方法匯總
這篇文章主要介紹了js實現(xiàn)window.open不被攔截的解決方法,實例匯總了常用的不被攔截的解決方法,需要的朋友可以參考下2014-10-10
JS設(shè)置手機(jī)驗證碼60s等待實現(xiàn)代碼
本文給大家分享JS設(shè)置手機(jī)驗證碼60s等待實現(xiàn)代碼，需要的朋友參考下吧2017-06-06
css+js實現(xiàn)部分區(qū)域高亮可編輯遮罩層
下面介紹我在項目中實現(xiàn)的方式，全屏遮罩，部分區(qū)域可操作,需要的朋友可以參考下2014-03-03