Maison > Article > interface Web > JS réalise l'effet d'animation de la porte coulissante

JS réalise l'effet d'animation de la porte coulissante

php中世界最好的语言original: 2018-04-18 15:59:152474parcourir

Cette fois, je vais vous amener JS pour réaliser l'effet dynamique de la porte coulissante. Quelles sont les précautions pour que JS réalise l'effet dynamique de la porte coulissante. Ce qui suit est un cas pratique, prenons. un regard.

Première méthode de mise en œuvre de la "Porte coulissante" : 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>

Deuxième méthode de mise en œuvre de la "Porte coulissante" : 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 : lors de la mise en œuvre de la méthode 1, 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 une fonction d'animation encapsulée, qui peut être directement introduits et utilisés).

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!

php JavaScript jquery css html 封装 JS

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：Explication détaillée des étapes d'utilisation des objets prototypes jsArticle suivant：Explication détaillée des étapes d'utilisation des objets prototypes js

Articles Liés

Voir plus