手风琴效果(折叠卡片效果)

案例说明

案例题目

案例分析

各方面分析

案例实现代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        
        .king li.current .big {
            display: block;
        }
        
        .king li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作:
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>




</body>

</html>

代码运行结果

插入结果图片请添加图片描述

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的手风琴折叠效果的HTML、CSS和JavaScript代码示例: HTML代码: ``` <div class="accordion"> <div class="accordion-item"> <div class="accordion-header">Section 1</div> <div class="accordion-content">Content for section 1 goes here.</div> </div> <div class="accordion-item"> <div class="accordion-header">Section 2</div> <div class="accordion-content">Content for section 2 goes here.</div> </div> <div class="accordion-item"> <div class="accordion-header">Section 3</div> <div class="accordion-content">Content for section 3 goes here.</div> </div> </div> ``` CSS代码: ``` .accordion { display: flex; flex-direction: column; } .accordion-item { border: 1px solid #ccc; margin-bottom: 10px; } .accordion-header { background-color: #eee; padding: 10px; cursor: pointer; } .accordion-header:hover { background-color: #ddd; } .accordion-content { padding: 10px; display: none; } ``` JavaScript代码: ``` const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', () => { const accordionItem = header.parentElement; const accordionContent = accordionItem.querySelector('.accordion-content'); accordionContent.classList.toggle('active'); if (accordionContent.classList.contains('active')) { accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px'; } else { accordionContent.style.maxHeight = null; } }); }); ``` 这段代码使用了Flexbox布局和JavaScript事件监听器来实现手风琴折叠效果。当用户点击折叠标题时,对应的内容部分将展开或折叠。其中,CSS代码设置了默认的折叠样式,JavaScript代码则根据内容的高度来动态计算展开的高度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值