web前端页面开发（HTML+CSS+javascript）案例2：HTML+CSS+js实现手风琴效果

最新推荐文章于 2023-03-24 21:14:21 发布
最新推荐文章于 2023-03-24 21:14:21 发布
阅读量2.1k 收藏 59
点赞数 7
文章标签： css html 前端 web javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56897195/article/details/124645932
版权

HTML+CSS+js实现手风琴效果

今天给大家分享一个用原生JS实现的手风琴特效，效果如下：
请添加图片描述

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fengqin.css">
    <script src="./fengqin.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="card active" style="background-image:url(./img/show\ 01.jpg)">
            <h3>小小</h3>
        </div>
        <div class="card" style="background-image:url(./img/show\ 02.png)">
            <h3>得到</h3>
        </div>
        <div class="card" style="background-image:url(./img/show\ 03.jpg)">
            <h3>融入</h3>
        </div>
        <div class="card" style="background-image:url(./img/show\ 01.jpg)">
            <h3>大哥</h3>
        </div>
        <div class="card" style="background-image:url(./img/show\ 03.jpg)">
            <h3>热热</h3>
        </div>
    </div>
</body>

</html>

CSS代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    top: 20px;
    align-items: center;
    justify-content: center;
    height: 500px;
    background-color: rgb(29, 27, 27);
}
.wrap{
    display: flex;
    width: 70vw;
    height: 500px ;
    /* border: 2px solid red; */
    
}
.card{
    margin-top: 20px;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50px;
    color: aliceblue;
    flex: 0.5;
    cursor: pointer;
    height: 88vh;
    position: relative;
    margin: 18px;
    transition: flex 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}
.card h3{
    font-size: 20px;
    bottom: 28px;
    position: absolute;
    left: 20px;
    margin: 0;
    transition: opacity 0s ease-in 0s ;
}
.card.active{
    /*通过弹性布局的方式，改变每个盒子的收缩*/
    flex: 5;
}
.card.active h3{
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}
@media (max-width:500px) {
    .wrap{
        width: 100vw;
    }
    .card:nth-child(4){
        display: none;
    }
    .card:nth-child(5){
        display: none;
    }

    
}

js代码：

window.addEventListener('load', function () {
    //获取元素
    var wrap = document.querySelector('.wrap');
    var cards = wrap.querySelectorAll('.card');
   // console.log(wrap);
    //console.log(cards);
    //遍历字节给cards添加移入事件，并添加active类名即可实现
    for (var i = 0; i < cards.length; i++) {
        cards[i].setAttribute("index",i);
        cards[i].addEventListener('click', function () {
           var index =this.getAttribute("index");
           for(var j=0;j<cards.length;j++){
               cards[j].className="card";
           }
           cards[index].className=" card active"
        })
    }
  
})
不能瞌睡呀
关注
  • 7
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
jQuery+CSS3手风琴展开导航菜单代码
06-05
这是一款基于jQuery+CSS3实现的鼠标悬停展开导航菜单，鼠标移到图标展开手风琴菜单代码。
web超轻量级手风琴效果，基于jquery，可批量生产，构造函数
powerFulCat的博客
08-13 83
css .box{border:1px solid #333;width:700px;height:500px;position:relative;overflow:hidden;} .box img{height:100%;width:100%;position:absolute;left: 0;top:0;transition: all 0.5s;} html <div class="box"></div> <script src="./static/jquery2.1.
在html中，如何实现手风琴的效果？
weixin_44571808的博客
02-10 2404
开发工具与关键技术：DW transition-delay 作者：黎凤焕 撰写时间：2019年2月4日 在html中，手风琴的出现顺序是不同的，我们可以运用transition-delay，transition-delay有延迟的作用，添加延迟的时间，出现的效果就会随着间隔时间大小出现。 设置transform: translateX(110px)和transition: all 0.2...
Web前端学习笔记（五）--- 手风琴菜单
海到无边天作岸 山登绝顶我为峰
04-15 1541
效果图 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
webapi手风琴案例
m0_62720752的博客
08-24 100
webapi手风琴案例，当经过图片时改变li的大小。
HTML+CSS+JS 简单应用小案例
Emperor10的博客
02-22 2915
猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
Web前端之实现手风琴效果
晚风挽着浮云的博客
03-06 2076
源代码如下所示：如要复制，记得换图哦！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
Html 实现手风琴效果
nihaio25的博客
09-10 5479
html简单实现手风琴效果 这是加载页面的效果 这是鼠标悬停的效果 鼠标悬停哪一张图片也会相对应的展开（下面是代码，图片自己找几张放上去，路劲修改成自己的就可以了） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
看着很好看的手风琴导航栏，其实代码超简单的
m0_66208731的博客
03-05 510
思路：利用排他思想，将所有的兄弟全部干掉，然后再把需要展示的图重新设置宽度，最后给大盒子加上一个鼠标移出的点击事件即可完成效果，代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title>手风琴</title> <style> ul { list-style:.
Easyui三级目录菜单+手风琴+spring mvc
qq_15674695的博客
08-15 3401
Easyui三级目录菜单+手风琴+spring mvc Easyui三级目录菜单+手风琴+spring mvc Easyui三级目录菜单+手风琴+spring mvc
web前端项目html+css+js中华传统文化期末项目
08-14
页面分别运用了轮播图、图片循环动画和手风琴效果展示主题图片，以及节日倒计时和留言等功能。如果对网站有什么意见和想法，可以通过反馈页面向我们反馈，我们会第一时间了解你们的想法，从而完善升级。
html+css+js手风琴效果，或焦点图代码
05-18
摘要:脚本资源,Ajax/JavaScript,手风琴菜单　手风琴效果。主要用到了html+css+js，其实也可以看作是一款焦点图效果，制作时候要注意：首先要把布局弄好，然后，让所有的图片都变小，让当前的这个图片变大。就OK了。...
HTML手风琴原理，纯CSS （无js）实现手风琴图片幻灯片效果
最新发布
01-25
纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。...第二种，即相册手风琴2.html，代码量较小，实现难度小，主要是应用到css中的，transition属性。 可根据自身需要调整图片、位置、大小。
CSS3+jQuery横向手风琴折叠效果.zip
11-16
CSS3+jQuery横向手风琴折叠效果.zip
jquery+css3垂直手风琴.zip
11-19
jquery+css3垂直手风琴.zip
蓝桥杯Web【功能实现】折叠手风琴
qq_49420571的博客
03-24 99
removeClass:把选中的元素的class类名删除；addClass():给选中的元素添加class类名；siblings():查找兄弟节点，不包括自身元素。
蓝桥杯web：第二题【功能实现】折叠手风琴
weixin_51167834的博客
02-22 650
使用 jQuery 语法完成代码，请完善index.js文件，让页面具有如下所示的效果： （手风琴动态效果） CSS代码： body { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; height: 100vh; transition: 0.25s; } body .options { display...
200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作 [建议收藏]
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-23 13万+
一、更多HTML期末学生结课大作业作品 ❤200套HTML期末大作业网页设计作品 1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全) 2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) 3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计) 4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 5
HTML制作手风琴效果,Dreamweaver制作手风琴图片展示效果（附代码）
weixin_35466750的博客
06-04 637
本篇文章给大家介绍一下Dreamweaver制作手风琴图片展示效果(附代码)。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。Dreamweaver制作网页的时候，发现网页的浏览交互效果会使人感到爽心悦目的感觉，该怎么制作呢？下面我们就来看看Dreamweaver何展现手风琴图片的交互效果的教程。1、打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生...
js+html5全屏手风琴幻灯片图片切换展示特效
06-06
好的，以下是使用 JavaScript 和 HTML5 实现全屏手风琴幻灯片图片切换展示特效的代码： HTML 部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全屏手风琴幻灯片图片切换展示特效</title> <style type="text/css"> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #container { position: relative; height: 100%; overflow: hidden; } .slide { position: absolute; top: 0; bottom: 0; width: 0; overflow: hidden; transition: width 0.5s; } .slide.active { width: 50%; } .slide img { display: block; height: 100%; margin: 0 auto; } </style> </head> <body> <div id="container"> <div class="slide active"> <img src="image1.jpg"> </div> <div class="slide"> <img src="image2.jpg"> </div> <div class="slide"> <img src="image3.jpg"> </div> <div class="slide"> <img src="image4.jpg"> </div> </div> <script src="script.js"></script> </body> </html> ``` JavaScript 部分： ```javascript var slides = document.querySelectorAll('.slide'); var currentIndex = 0; var timer; // 绑定事件 window.addEventListener('resize', setSlideWidth); setSlideWidth(); startAutoPlay(); // 设置幻灯片宽度 function setSlideWidth() { var containerWidth = document.getElementById('container').offsetWidth; for (var i = 0; i < slides.length; i++) { if (i === currentIndex) { slides[i].style.width = containerWidth + 'px'; } else { slides[i].style.width = (containerWidth / 2) + 'px'; } } } // 开始自动播放 function startAutoPlay() { timer = setInterval(function() { currentIndex++; if (currentIndex >= slides.length) { currentIndex = 0; } setActiveSlide(currentIndex); }, 3000); } // 设置当前激活的幻灯片 function setActiveSlide(index) { for (var i = 0; i < slides.length; i++) { if (i === index) { slides[i].classList.add('active'); } else { slides[i].classList.remove('active'); } } } // 停止自动播放 function stopAutoPlay() { clearInterval(timer); } ``` 这段代码使用了 HTML5 中的 `transition` 属性实现了手风琴效果，同时使用 JavaScript 实现了自动播放和手动切换幻灯片的功能。运行这段代码，可以在浏览器中看到全屏手风琴幻灯片图片切换展示特效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不能瞌睡呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值