jquery写手风琴代码

来源：互联网发布：淘宝的运费险是什么意思编辑：程序博客网时间：2024/06/16 07:19

jquery写手风琴代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{            margin: 0px auto;            padding: 0px;        }        ul{            list-style: none;        }        .box{            width: 910px;            height: 454px;            border: 1px solid red;            margin-top:100px;            position: relative;            overflow: hidden;        }        .box ul li{            width:760px;            height:454px;            position: absolute;            top: 0px;}        .box ul li img{            float:left;        }        .box ul li h3{            width: 30px;            height: 454px;            float: left;        }        .li01 h3{            background: yellow;        }        .li02 h3{            background: blue;        }        .li03 h3{            background: orange;        }        .li04 h3{            background: red;        }        .li05 h3{            background: purple;        }        .li06 h3{            background: pink;        }        .box ul li.li01{position: absolute;left: 0px;}        .box ul li.li02{position: absolute;left: 760px;}        .box ul li.li03{position: absolute;left: 790px;}        .box ul li.li04{position: absolute;left: 820px;}        .box ul li.li05{position: absolute;left: 850px;}        .box ul li.li06{position: absolute;left: 880px;}    </style>    <script type="text/javascript" src="jquery-3.1.1.min.js">       </script>    <script type="text/javascript">        $(document).ready(function(){            $(".li01 h3").mouseenter(function(){                $(".li02").animate({"left":760},1000)                $(".li03").animate({"left":790},1000)                $(".li04").animate({"left":820},1000)                $(".li05").animate({"left":850},1000)                $(".li06").animate({"left":880},1000)            })            $(".li02 h3").mouseenter(function(){                $(".li02").animate({"left":30},1000)                $(".li03").animate({"left":790},1000)                $(".li04").animate({"left":820},1000)                $(".li05").animate({"left":850},1000)                $(".li06").animate({"left":880},1000)            })            $(".li03 h3").mouseenter(function(){                $(".li02").animate({"left":30},1000)                $(".li03").animate({"left":60},1000)                $(".li04").animate({"left":820},1000)                $(".li05").animate({"left":850},1000)                $(".li06").animate({"left":880},1000)            })            $(".li04 h3").mouseenter(function(){                $(".li02").animate({"left":30},1000)                $(".li03").animate({"left":60},1000)                $(".li04").animate({"left":90},1000)                $(".li05").animate({"left":850},1000)                $(".li06").animate({"left":880},1000)            })            $(".li05 h3").mouseenter(function(){                $(".li02").animate({"left":30},1000)                $(".li03").animate({"left":60},1000)                $(".li04").animate({"left":90},1000)                $(".li05").animate({"left":120},1000)                $(".li06").animate({"left":880},1000)            })            $(".li06 h3").mouseenter(function(){                $(".li02").animate({"left":30},1000)                $(".li03").animate({"left":60},1000)                $(".li04").animate({"left":90},1000)                $(".li05").animate({"left":120},1000)                $(".li06").animate({"left":150},1000)            })        })    </script></head><body>    <div class="box">        <ul>            <li class="li01">                <h3></h3>                <img src="images/1.jpg">            </li>            <li class="li02">                <h3></h3>                <img src="images/2.jpg">            </li>            <li class="li03">                <h3></h3>                <img src="images/3.jpg">            </li>            <li class="li04">                <h3></h3>                <img src="images/4.jpg">            </li>            <li class="li05">                <h3></h3>                <img src="images/5.jpg">            </li>            <li class="li06">                <h3></h3>                <img src="images/6.jpg">            </li>        </ul>    </div></body></html>

图片1：宽730px 高454px
图片2：宽730px 高454px
图片3：宽730px 高454px
图片4：宽730px 高454px
图片5：宽730px 高454px
图片6：宽730px 高454px

注意：要引进jquery的包，版本可以是其他版本，不一定是3.1.1版本。图片的宽度是730px；li的宽度是760px；总宽度是910px；高度都是454p x 。引用jquery包的格式如下：

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

0 0