Heim > Artikel > Web-Frontend > So implementieren Sie den Bildgleiteffekt mit jQuery

So implementieren Sie den Bildgleiteffekt mit jQuery

小云云Original: 2018-01-23 09:19:472061Durchsuche

Bildgleiten ist an vielen Stellen erforderlich. In diesem Artikel werden hauptsächlich Beispiele für die Realisierung des Bildgleiteffekts durch jQuery vorgestellt, der einen guten Referenzwert hat. Werfen wir einen Blick mit dem folgenden Editor. Ich hoffe, er kann allen helfen.

Idee: Wenn die Maus das Element betritt, wird die erste Funktion im Hover ausgelöst, und wenn die Maus es verlässt, wird die zweite Funktion im Hover ausgelöst.

Wie im Bild gezeigt:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      width: 1000px;
      margin: 0 auto;
    }
    li{
      cursor: pointer;
      border: 1px solid #fff;
      display: inline-block;
      width: 198px;
      height: 250px;
      float: left;
      overflow: hidden;
      background-color: #f7f7f7;
      position: relative;
    }
    li .fade{
      font-family: "微软雅黑";
      display: none;
      width: 320px;
      height: 270px;
      background: #090;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 19;
    }
    li .img1{
      width: 110px;
      height: 110px;
      text-align: center;
      position: absolute;
      top: 22px;
      right: 41px;
      z-index: 99;
    }
    li .img2{
      width: 110px;
      height: 110px;
      text-align: center;
      position: absolute;
      top: 22px;
      left: -110px;
      z-index: 99;
    }
    li .txt1{
      width: 198px;
      height: 100px;
      color: #999999;
      position: absolute;
      top: 145px;
      left: 0px;
      z-index: 99;
      text-align: center;
    }
    li .txt2{
      width: 198px;
      height: 100px;
      color: #a9cf4f;
      position: absolute;
      top: 145px;
      right: -240px;
      z-index: 99;
      text-align: center;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<p class="main">
  <ul>
    <li>
      <p class="fade"></p>
      <p class="img1"><img src="img/1.png"></p>
      <p class="img2"><img src="img/1-1.png"></p>
      <p class="txt1">啦啦啦啦啦</p>
      <p class="txt2">是是是是是</p>
    </li>
    <li>
      <p class="fade"></p>
      <p class="img1"><img src="img/2.png"></p>
      <p class="img2"><img src="img/2-2.png"></p>
      <p class="txt1">啦啦啦啦啦</p>
      <p class="txt2">是是是是是</p>
    </li>
    <li>
      <p class="fade"></p>
      <p class="img1"><img src="img/1.png"></p>
      <p class="img2"><img src="img/1-1.png"></p>
      <p class="txt1">啦啦啦啦啦</p>
      <p class="txt2">是是是是是</p>
    </li>
    <li>
      <p class="fade"></p>
      <p class="img1"><img src="img/2.png"></p>
      <p class="img2"><img src="img/2-2.png"></p>
      <p class="txt1">啦啦啦啦啦</p>
      <p class="txt2">是是是是是</p>
    </li>
  </ul>
</p>
<script>
  $(function(){
    $("ul li").hover(function(){
      $(this).children().stop(false,true);
      $(this).find(".fade").fadeIn("slow");
      $(this).find(".img1").animate({right:-110},400);
      $(this).find(".img2").animate({left:41},400);
      $(this).find(".txt1").animate({left:240},400);
      $(this).find(".txt2").animate({right:0},400);
    },function(){
      $(this).children().stop(false,true);
      $(this).find(".fade").fadeOut("slow");
      $(this).find(".img1").animate({right:41},400);
      $(this).find(".img2").animate({left:-110},400);
      $(this).find(".txt1").animate({left:0},400);
      $(this).find(".txt2").animate({right:-240},400);
    })
  })
</script>
</body>
</html>

Verwandte Empfehlungen:

js-Plug-in zum Implementieren der Bild-Sliding-Verifizierungscode-Beispielfreigabe

JavaScript-Bild-Schiebeschalteffekt

Javascript-Bild-Schiebeschaltcode_Bild-Spezialeffekte

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Bildgleiteffekt mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery 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：Analyse der $.extend-Beispiele für flache und tiefe Kopien von jQueryNächster Artikel：Analyse der $.extend-Beispiele für flache und tiefe Kopien von jQuery

In Verbindung stehende Artikel

Mehr sehen