jQuery手风琴特效

最新推荐文章于 2022-05-26 20:14:40 发布

叮~

最新推荐文章于 2022-05-26 20:14:40 发布

阅读量877

点赞数

分类专栏： jQuery学习文章标签： jQuery 手风琴 jQuery学习(简单小案例手风琴)

本文链接：https://blog.csdn.net/djf_0_1/article/details/82455830

版权

jQuery学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.效果图

2.代码 demo (以5张图为例，可以自由计算缩减或者添加张数)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }


    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#box>ul>li").mouseover(function () {
                //当前的li的所有的兄弟元素li的宽度设置一下
                $(this).siblings("li").css("width","100px");
                $(this).css("width","800px");
            });
            $("#box>ul>li").mouseout(function () {
                $("#box>ul>li").css("width","240px");
            });
        });
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
</div>
</body>
</html>

3.jQuery.js 下载地址 https://jquery.com/download/

叮~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery手风琴特效

1.效果图2.代码 demo (以5张图为例，可以自由计算缩减或者添加张数)&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;sty
复制链接

扫一扫

专栏目录