suchen

Heim >Web-Frontend >js-Tutorial >JS realisiert den Schiebetür-Animationseffekt

JS realisiert den Schiebetür-Animationseffekt

php中世界最好的语言
php中世界最好的语言Original
2018-04-18 15:59:152525Durchsuche

Dieses Mal bringe ich Ihnen JS, um den dynamischen Effekt der Schiebetür zu realisieren. Was sind die Vorsichtsmaßnahmen für JS, um den dynamischen Effekt der Schiebetür zu realisieren? ein Blick.

„Schiebetür“-Implementierungsmethode eins: Bildbreite ändern

HTML+CSS-Code

<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>
jQuery-Implementierung 

<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>
Implementierungsmethode „Schiebetür“ zwei: Ändern Sie den Versatzwert des Bildes

HTML+CSS-Code

<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>
jQuery-Implementierung

<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>
HINWEIS: Achten Sie bei der Umsetzung von Methode 1 auf die Einstellungen zur Breite und Bildbenennung.

Tipp: Hier wird der jQuery-Code verwendet, und der JavaScript-Code kann auf die gleiche Weise implementiert werden. Ändern Sie einfach den Durchlaufprozess und die integrierten Funktionsmethoden und schreiben Sie die Animationsfunktion neu (die vorherigen Hinweise enthalten eine gekapselte Animationsfunktion). direkt eingeführt und genutzt werden).

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:



Das obige ist der detaillierte Inhalt vonJS realisiert den Schiebetür-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery css html 封装 JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zur Verwendung von js-PrototypobjektenNächster Artikel：Detaillierte Erläuterung der Schritte zur Verwendung von js-Prototypobjekten

In Verbindung stehende Artikel

Mehr sehen