JQuery手风琴效果

深藏阁楼爱情的钟 2022-05-31 09:55 250阅读 0赞

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <script src="./jquery-1.12.4.js"></script>  
  <style>  
    \* \{  
      margin: 0;  
      padding: 0;  
      list-style: none;  
    \}  
    .box \{  
      width: 1090px;  
      height: 230px;  
      background-color: pink;  
      margin: 100px auto;  
    \}  
  
    .box li \{  
      float: left;  
    \}  
  
    .box .title \{  
      width: 116px;  
      height: 230px;  
      float: left;  
      background-image: url(images/img1.jpg);  
    \}  
  
    .box .content \{  
      width: 0px;  
      height: 230px;  
      background-image: url(images/pic1.jpg);  
      float: left;  
    \}  
  
    /\*只给第一个li标签下的content设置宽度\*/  
    .box li:first-child .content \{  
      width: 510px;  
    \}  
  </style>  
</head>  
<body>  
  
<div class="box">  
  <ul>  
    <li>  
      <div class="title"></div>  
      <div class="content"></div>  
    </li>  
    <li>  
      <div class="title"></div>  
      <div class="content"></div>  
    </li>  
    <li>  
      <div class="title"></div>  
      <div class="content"></div>  
    </li>  
    <li>  
      <div class="title"></div>  
      <div class="content"></div>  
    </li>  
    <li>  
      <div class="title"></div>  
      <div class="content"></div>  
    </li>  
  </ul>  
</div>  
<script>  
    $(function()\{  
        $('li').each(function(index,elem)\{  
            $(elem).children('.title').css('background-image','url(images/img'+(index+1)+'.jpg)');  
            $(elem).children('.content').css('background-image','url(images/pic'+(index+1)+'.jpg)');  
        \});  
        $('li').on('mouseenter',function (e) \{  
            $(this).children(".content").stop().animate(\{width:510\});  
            $(this).siblings().children(".content").stop().animate(\{width:0\});  
        \});  
    \});  
</script>  
</body>  
</html>