jQuery学习之手风琴效果

来源：互联网发布：知其所以然技术论坛编辑：程序博客网时间：2024/06/06 12:20

js代码：

<script type="text/javascript" src="jquery-3.0.0.js"></script>

<script type="text/javascript">            $(function() {                //获取所有li遍历                $(".li_list").each(function() {                    //当鼠标进去当前li                    $(this).mouseenter(function() {                        //设置当前元素宽度                        $(this).stop()                                .animate({ "width": "600px" }, 500, "linear");                                //设置同胞元素宽度                                .siblings().stop()                                           .animate({ "width": "100px" }, 500, "linear");                    });                });            });        </script>

css代码：

            .li_list {                width: 100px;                height: 300px;                list-style: none;                float: left;                overflow: hidden;            }            .li_list img {                width: 100%;                height: 100%;            }            .divbg {                width: 600px;                height: 300px;                background: rgba(230, 0, 0, 0.5);                text-align: center;                line-height: 300px;                float: left;            }            .divbg span {                display: block;                width: 100px;                height: 300px;                float: left;            }            .div1 {                width: 500px;                height: 300px;                float: left;            }            .mo{                width: 600px;            }

html代码：

        <ul class="ul_list">            <li class="li_list">                <div class="divbg">                    <span>萌宠</span>                    <div class="div1">                        <img src="img/0.jpg" />                    </div>                </div>            </li>            <li class="li_list">                <div class="divbg">                    <span>萌宠</span>                    <div class="div1">                        <img src="img/1.jpg" />                    </div>                </div>            </li>            <li class="li_list">                <div class="divbg">                    <span>萌宠</span>                    <div class="div1">                        <img src="img/2.jpg" />                    </div>                </div>            </li>            <li class="li_list mo">                <div class="divbg">                    <span>萌宠</span>                    <div class="div1">                        <img src="img/3.jpg" />                    </div>                </div>            </li>        </ul>

阅读全文

0 0