JavaScript实现手风琴效果

以你之姓@ 2022-10-30 07:24 141阅读 0赞

代码：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
64  
65  
66  
67  
<!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>