个人中心
gpt4 book ai didi

JavaScript实现手风琴效果

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript实现手风琴效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了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
文章推荐： WebStorm无法正确识别Vue3组合式API的解决方案
文章推荐： C++命名空间实例详解
文章推荐： 代码块高亮可复制显示js插件highlight.js+clipboard.js整合
文章推荐： C++ inline内联函数详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com