Maison > Article > interface Web > Exemple détaillé d'implémentation d'un effet d'animation de porte coulissante d'image basé sur jQuery

Exemple détaillé d'implémentation d'un effet d'animation de porte coulissante d'image basé sur jQuery

小云云original: 2017-12-29 13:40:201617parcourir

L'effet dynamique « porte coulissante » peut également être appelé effet « accordéon ». L'idée de réaliser la plupart des effets est fondamentalement la même. Deux méthodes sont présentées ci-dessous. L'une consiste à déplacer l'image en changeant l'image. position de décalage. L'autre consiste à transformer en parcourant l'image d'arrière-plan puis en modifiant la largeur de l'image. Cet article partage principalement deux méthodes pour obtenir l'effet d'animation « porte coulissante », qui peut également être appelé effet accordéon. Apprenons les méthodes de mise en œuvre spécifiques à travers cet article. J'espère que cela pourra aider tout le monde.

Première méthode d'implémentation : modifier la largeur de l'image

code html+css

<body>
  <p class="box">
    <ul>
      <!-- <li>![](images/slidepic2.jpg)</li> -->
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </p>
</body>
<style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      /*收缩状态:缩放时每个图片的大小240px 所以总大小1200px*/
      /*展开状态:当前图片宽度800px 其他图片宽度100px*/
      width: 1200px;
      height: 500px;
      border:1px solid red;
      margin: 50px auto;
    }
    .box ul{
      list-style: none;
      width: 1210px;
    }
    /*设置每一张图片的大小和float: left*/
    .box ul li{
      width: 240px;
      height: 500px;
      /*background: url(images/slidepic2.jpg);*/
      float: left;
    }
  </style>

implémentation de jQuery

<script src = &#39;jquery-3.2.1.js&#39;></script>
<script>
  $(function(){
    //1遍历每一张li 获取每个元素设置对应的图片
    var lis = $('li');
    lis.each(function(index, element){
      //通过设置背景图片名称改变图片的显示
      var imgName = "images/slidepic" + (index + 2) +".jpg ";
      $(element).css('background', "url('"+ imgName +"')")
    });
    //2.展开状态
    //鼠标滑入改变对应图片宽度800 其他图片(兄弟)改为100
    lis.mouseenter(function(){
      // console.log(this); 当前的li DOM元素
      //当前的图片的宽度变为800
      $(this).stop().animate({width: 800});
      //其他图片的宽度变为100
      $(this).siblings('li').stop().animate({width: 100});
    });
    //3鼠标滑出是全部显示为收缩状态
    lis.mouseout(function(){
      lis.stop().animate({width: 240});
    });
  })
</script>

code simplifié jQuery

//精简代码
$(function(){
  $('li').each(function(index, element){
    $(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')");
  }).mouseenter(function(){
    $(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100});
  }).mouseout(function(){
    $('li').stop().animate({width: 240});
  });
})

Méthode d'implémentation deux : modifier la valeur de décalage de l'image

code html+css

<body>
  <p class="picList">
    <ul>
      <li>![](images/slidepic8.jpg)</li>
      <li>![](images/slidepic3.jpg)</li>
      <li>![](images/slidepic4.jpg)</li>
      <li>![](images/slidepic5.jpg)</li>
      <li>![](images/slidepic7.jpg)</li>
    </ul>
  </p>
</body>
<style>
    *{
      background-color: #aaa;
      padding: 0;
      margin: 0;
    }
    ul{list-style: none;}
    .picList{
      width: 1000px;
      height: 400px;
      /*border:1px solid #eee;*/
      margin:100px auto;
      position: relative;
      overflow: hidden;
    }
    /*设置定位属性 所有图片覆盖在起始位置*/
    .picList ul li{
      position: absolute;
      width: 1000px;
      height: 400px;
      top: 0;
    }
    img{
      width: 100%;
      height: 400px;
      cursor: pointer;
    }
</style>

implémentation de jQuery

<script src = &#39;jquery-3.2.1.js&#39;></script>
<script >
  $(function(){
    //1获取所有的图片 设置初始的收缩状态left:i*200
    var lis = $('li');
    for(var i = 0; i < lis.length; i++){
      lis.eq(i).css({left:i*200 + 'px' });
    }
    //2.设置hover内置函数,实现鼠标滑入展开滑出收缩效果
    lis.hover(function(){
      var index = $(this).index(); //DOM对象转换jQuery对象
      //2.1鼠标滑入后,当前图片的前面图片偏移位置减小到 j*100位置
      for(var j = 0; j <= index; j++){
        lis.eq(j).stop().animate({left: j*100 + 'px'},300);
      }
      //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
      for(var j = index + 1; j < lis.length; j++){
        lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
      }
    },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
      for(var i = 0; i < lis.length; i++){
        lis.eq(i).stop().animate({left: i*200 + 'px'},300);
      }
    });
  })
</script>

Remarque : méthode 1 Pendant le processus de mise en œuvre, faites attention aux paramètres de largeur et de dénomination de l'image.

Astuce : le code jQuery est utilisé ici, et le code javaScript peut être implémenté de la même manière. Modifiez simplement le processus de parcours et les méthodes de fonction intégrées, et réécrivez la fonction d'animation (les notes précédentes ont encapsulé fonction d'animation, peut être directement introduite et utilisée).

Recommandations associées :

Exemple détaillé de l'effet de changement d'image automatique ou manuel jQuery

Exemple détaillé de JS implémentation de la pagination Parcourir les images horizontales

jQuery implémente la fonction de prévisualisation avant de télécharger les fichiers image

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：Menu jQuery tout sélectionner, inverser la sélection, annuler l'analyse d'instanceArticle suivant：Menu jQuery tout sélectionner, inverser la sélection, annuler l'analyse d'instance

Articles Liés

Voir plus