jQuery手风琴

最新推荐文章于 2022-05-29 19:32:58 发布

WM8686

最新推荐文章于 2022-05-29 19:32:58 发布

阅读量161

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/WM8686/article/details/101036207

版权

本文介绍了如何使用jQuery创建一个手风琴效果。通过设置CSS样式，创建了一个包含五个li元素的ul，每个li有不同的背景颜色并水平浮动。利用jQuery的事件监听和兄弟元素操作，实现了当鼠标悬停在li上时，选中li宽度扩大，其他li宽度缩小的效果。当鼠标离开ul，所有li恢复初始状态。关键代码涉及到了jQuery的选择器、事件绑定和动画功能。

摘要由CSDN通过智能技术生成

jQuery手风琴

- - 手风琴案例
  - - 关键代码
    - 所有代码

手风琴案例

案例分析：
建一个ul，这个ul的宽为1020px，高为450px，让这个ul水平居中，这个ul里面有五个li，每个li的宽度为200px，分别给每个li加背景颜色，让他们向左浮动。
当鼠标移动到某个li上方时，该图片宽度变成500px，其余宽度平均为125px。
当鼠标离开 ul时，就恢复到初始状态，所有li恢复平均宽度200px

关键代码

利用jQuery中兄弟关系，实现效果，当鼠标移到我的上方时，我变成什么样，其他兄弟变成其他样子，最后鼠标移开恢复成原来的样子

<script src="js/jquery.js"></script>
    <script>
        $('ul>li').mouseenter(function(){
            $(this).stop(true)
            .animate({
                width:"500px"
            })
            .siblings().stop(true)
            .animate({width:'125px'});
        });

        $('ul').mouseleave(function(){
            $(this).find('li').animate({width:'200px'});
        });
    </script>

为了防止出错，当鼠标从当前li离开到下一个li是，当前li动画停止，防止影响下一个li的运行！~~

所有代码

 <style>
        ul,li{list-style-type: none;padding: 0;margin: 0;}
        ul{width: 1020px;height: 450px;margin: 50px auto;}
        ul>li{width:200px;height: 100%; float: left;}
    </style>
 <body>
    <ul>
        <li style="background: skyblue;"></li>
        <li style="background: tomato;"></li>
        <li style="background: pink;"></li>
        <li style="background: red;"></li>
        <li style="background:blue;"></li>
    </ul>
    <script src="js/jquery.js"></script>
    <script>
        $('ul>li').mouseenter(function(){
            $(this).stop(true)
            .animate({
                width:"500px"
            })
            .siblings().stop(true)
            .animate({width:'125px'});
        });
        $('ul').mouseleave(function(){
            $(this).find('li').animate({width:'200px'});
        });
    </script>
</body>

WM8686

关注

0
点赞
踩
0

收藏

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

jQuery手风琴手风琴案例关键代码所有代码手风琴案例案例分析：建一个ul，这个ul的宽为1020px，高为450px，让这个ul水平居中，这个ul里面有五个li，每个li的宽度为200px，分别给每个li加背景颜色，让他们向左浮动。当鼠标移动到某个li上方时，该图片宽度变成500px，其余宽度平均为125px。当鼠标离开 ul时，就恢复到初始状态，所有li恢复平均宽度200px关键代...
复制链接

扫一扫