Maison > Article > interface Web > animation de mise au point en accordéon jquery

animation de mise au point en accordéon jquery

韦小宝original: 2017-11-21 10:28:321713parcourir

jquery Le plug-in d'animation de focus accordéon peut être utilisé directement. Les étudiants intéressés par jquery peuvent également l'utiliser pour étudier et sublimer notre jquery. Connaissance.

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网--手风琴焦点图</title>
<style>
  *{margin:0; padding:0;}
  body,html{width:100%; height:100%;}
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .bg-box-1{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/zhibo4.jpg&#39;) no-repeat center/cover;
  }
  .bg-box-2{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner1.jpg&#39;) no-repeat center/cover;
  }
  .bg-box-3{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner3.jpg&#39;) no-repeat center/cover;
  }
  .bg-box-4{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner4.jpg&#39;) no-repeat center/cover;
  }
  #wrap{
    position: absolute;
    overflow: hidden;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
    width: 1000px;
    height: 400px;
  }
  #wrap > ul{
    width: 120%;
    list-style: none;
  }
  #wrap > ul > li{
    float: left;
    width: 100px;
    height: 400px;
    cursor: pointer;
  }
  #wrap > ul > li:nth-child(1){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/zhibo4.jpg&#39;) no-repeat center/cover;
  }
  #wrap > ul > li:nth-child(2){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner1.jpg&#39;) no-repeat center/cover;
  }
  #wrap > ul > li:nth-child(3){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner3.jpg&#39;) no-repeat center/cover;
  }
  #wrap > ul > li:nth-child(4){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner4.jpg&#39;) no-repeat center/cover;
    width: 700px;
  } 
  #wrap > ul > li > .text{
    width: 100px;
    height: 100%;
    background: #000;
    opacity: .5;
  }
  #wrap > ul > li > .text p{
    padding: 20px 40px;
    font-family: &#39;Microsoft yahei&#39;;
    color: #fff;
  }
</style>
</head>
<body>

<div class="bg bg-box-1"></div>
<div class="bg bg-box-2"></div>
<div class="bg bg-box-3"></div>
<div class="bg bg-box-4"></div>
<div id="wrap">
  <ul>
    <li>
      <div>
        <p>PHP中文网线上培训班</p>
      </div>
    </li>
    <li>
      <div>
        <p>创建一个属于自己的框架</p>
      </div>
    </li>
    <li>
      <div>
        <p>企业站点开发</p>
      </div>
    </li>
    <li>
      <div>
        <p>PHP中文网--这个专注编程教育的网站</p>
      </div>
    </li>
  </ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script type="text/javascript">
(function(){
  $(&#39;#wrap li&#39;).mouseover(function(){
    if(!$(this).hasClass(&#39;curr&#39;)){
      $(&#39;#wrap li&#39;).removeClass(&#39;curr&#39;);
      $(this).addClass(&#39;curr&#39;);

      // 切换背景
      $(&#39;#wrap li&#39;).each(function(index){
        if($(this).hasClass(&#39;curr&#39;)){
          $(&#39;.bg&#39;).fadeOut(300);
          $(&#39;.bg:eq(&#39; + index + &#39;)&#39;).fadeIn(500);
        }
      });

      $(&#39;.curr&#39;).stop().animate({
        width: 700
      }, 500, &#39;linear&#39;);
      $(&#39;#wrap li&#39;).not(&#39;.curr&#39;).stop().animate({
        width: 100
      }, 500, &#39;linear&#39;);
    }
  });
})()
</script>

</body>
</html>

Ce qui précède est le code source de l'animation de focus accordéon jquery. il peut l'obtenir directement. Allez l'utiliser et étudiez-le ! Pour plus d'articles et de codes sources, veuillez effectuer une recherche sur le Site Web PHP chinois ~~

Recommandations associées :

animation de sélection de titre jquery

Exemple de code jQuery pour implémenter div pour suivre le mouvement de la souris

jquery à implémenter code source de déverrouillage par geste

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScriptArticle suivant：Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript

Articles Liés

Voir plus