个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
28
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章JavaScript实现手风琴效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本文实例为大家分享了JavaScript实现手风琴效果的具体代码，供大家参考，具体内容如下 。
代码:
|
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
>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.
原文链接：https://blog.csdn.net/weixin_45773503/article/details/113814661 。
最后此篇关于JavaScript实现手风琴效果的文章就讲到这里了,如果你想了解更多关于JavaScript实现手风琴效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
28
4
0
我是一名优秀的程序员,十分优秀！