Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image

Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image

Ces dernières années, avec le développement rapide de la technologie frontale Web, de plus en plus de frameworks et de bibliothèques sont utilisés pour embellir et améliorer les fonctionnalités des pages Web. Parmi eux, Layui est un framework frontal très populaire qui fournit des composants d'interface utilisateur riches et des extensions de fonctions faciles à utiliser. Cet article expliquera comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image, et donnera des exemples de code spécifiques.

1. Implémentation de l'effet de changement d'image

1. Structure HTML

Tout d'abord, nous devons préparer quelques structures HTML pour l'affichage et le changement d'images. Supposons que nous ayons trois images pouvant être affichées en cliquant sur un bouton.

<div class="image-container">
  <img  class="current-image lazy"  src="/static/imghw/default1.png"  data-src="image1.jpg"  alt="Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image" >
  <img  src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image" >
  <img  src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image" >
</div>

<button class="btn-prev">上一张</button>
<button class="btn-next">下一张</button>

2. Styles CSS

Ensuite, nous devons ajouter quelques styles aux images et aux boutons afin qu'ils apparaissent centrés sur la page et aient la bonne taille.

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  transition: transform 0.5s;
}

.btn-prev,
.btn-next {
  margin: 10px;
}

3. Code JavaScript

Enfin, nous utilisons le mécanisme d'écoute d'événements de Layui pour obtenir l'effet de changement d'image.

layui.use('jquery', function(){
  var $ = layui.jquery;
  
  // 获取图片列表和按钮
  var images = $('.image-container img');
  var btnPrev = $('.btn-prev');
  var btnNext = $('.btn-next');
  
  // 设置初始下标
  var currentIndex = 0;
  
  // 上一张按钮点击事件
  btnPrev.click(function(){
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    updateImage();
  });
  
  // 下一张按钮点击事件
  btnNext.click(function(){
    currentIndex = (currentIndex + 1) % images.length;
    updateImage();
  });
  
  // 更新图片显示
  function updateImage(){
    images.removeClass('current-image');
    images.eq(currentIndex).addClass('current-image');
  }
});

Avec le code ci-dessus, nous avons obtenu l'effet de changement d'image. En cliquant sur le bouton "Précédent", vous passerez à l'image précédente ; en cliquant sur le bouton "Suivant", vous passerez à l'image suivante.

2. Implémentation de l'effet d'étirement d'image

1. Structure HTML

Avant de réaliser l'effet d'étirement d'image, nous devons ajouter quelques structures HTML supplémentaires.

<div class="image-wrap">
  <img  src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image" >
</div>

<button class="btn-stretch">拉伸</button>

2. Style CSS

Afin d'obtenir l'effet d'étirement de l'image, nous devons définir un conteneur externe pour limiter la taille de l'image. Dans le même temps, nous devons également ajouter des styles au bouton.

.image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 400px;
  overflow: hidden;
  border: 1px solid #000;
}

.image-wrap img {
  width: 100%;
  height: auto;
  transition: all 0.5s;
}

.btn-stretch {
  margin-top: 10px;
}

3. Code JavaScript

Enfin, nous utilisons le mécanisme d'écoute d'événements de Layui pour obtenir l'effet d'étirement de l'image.

layui.use('jquery', function(){
  var $ = layui.jquery;
  
  // 获取图片和按钮
  var imageWrap = $('.image-wrap');
  var image = $('.image-wrap img');
  var btnStretch = $('.btn-stretch');
  
  // 是否拉伸标志
  var isStretched = false;
  
  // 拉伸按钮点击事件
  btnStretch.click(function(){
    if(isStretched){
      image.css('width', '100%');
    } else {
      image.css('width', '200%');
    }
    
    isStretched = !isStretched;
  });
});

Avec le code ci-dessus, nous avons obtenu l'effet d'étirement de l'image. Cliquez sur le bouton « Étirer » et la largeur de l'image passera de 100 % à 200 %, puis de 200 % à 100 %. Obtention de l'effet d'étirement et de rétrécissement de l'image.

Résumé :

Cet article présente comment utiliser le framework Layui pour obtenir des effets de commutation et d'étirement d'image. Grâce aux exemples de code ci-dessus, nous pouvons voir que le framework Layui fournit une multitude de composants et de fonctions d'extension pour permettre aux développeurs de créer rapidement des pages Web belles et pratiques. J'espère que cet article pourra vous aider à apprendre et à utiliser le framework Layui.

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!