suchen

Heim >Web-Frontend >js-Tutorial >Wir teilen zwei Möglichkeiten, den Animationseffekt einer Bildschiebetür mit jQuery zu realisieren

Wir teilen zwei Möglichkeiten, den Animationseffekt einer Bildschiebetür mit jQuery zu realisieren

小云云
小云云Original
2017-12-31 09:33:051873Durchsuche

Der dynamische „Schiebetür“-Effekt kann auch als „Akkordeon“-Effekt bezeichnet werden. Die Idee zur Realisierung der meisten Effekte ist im Folgenden vorgestellt. Eine davon besteht darin, das Bild zu verschieben Die andere Möglichkeit besteht darin, eine Transformation durch Durchlaufen des Hintergrundbilds und anschließendes Ändern der Bildbreite zu erreichen. Die beiden Methoden in diesem Artikel erzielen den „Schiebetür“-Animationseffekt, der auch als Akkordeoneffekt bezeichnet werden kann. Ich hoffe, er kann jedem helfen.

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>

jQuery optimierter Code

//精简代码
$(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});
  });
})

Implementierungsmethode zwei: Ändern Sie den Offset-Wert 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: Methode 1 Achten Sie während des Implementierungsprozesses auf die Einstellungen für 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 wurden gekapselt). Animationsfunktion, kann direkt eingeführt und verwendet werden).

Verwandte Empfehlungen:

Detailliertes Beispiel für die Implementierung des Bildschiebetür-Animationseffekts basierend auf jQuery

Detailliertes Beispiel von jQuery und HTML5 implementiert WebGL-Hochleistungs-Feuerwerk-Blüten-Animationseffekt

So erstellen Sie eine Webseite mit Eröffnungsanimationseffekt in Dreamweaver

Das obige ist der detaillierte Inhalt vonWir teilen zwei Möglichkeiten, den Animationseffekt einer Bildschiebetür mit jQuery zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：AJax implementiert ähnliche Funktionen wie die Baidu-SuchleisteNächster Artikel：AJax implementiert ähnliche Funktionen wie die Baidu-Suchleiste

In Verbindung stehende Artikel

Mehr sehen