Maison >interface Web >js tutoriel >Comment implémenter l'effet de glissement d'image avec jQuery

Comment implémenter l'effet de glissement d'image avec jQuery

小云云original: 2018-01-23 09:19:472084parcourir

Le glissement d'image est nécessaire dans de nombreux endroits.Cet article présente principalement des exemples de jQuery réalisant l'effet de glissement d'image, qui a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

Idée : Lorsque la souris entre dans l'élément, la première fonction en survol se déclenche, et lorsque la souris en sort, la deuxième fonction en survol se déclenche.

Comme indiqué sur l'image :

Le code est le suivant :

<!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>

Recommandations associées :

Plug-in js pour implémenter le partage d'exemples de code de vérification par glissement d'image

Effet de commutation coulissante d'image JavaScript

Commutation coulissante d'image Javascript code_image effets spéciaux

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!

JavaScript jquery 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：Analyse des exemples de copie superficielle et de copie profonde $.extend de jQueryArticle suivant：Analyse des exemples de copie superficielle et de copie profonde $.extend de jQuery

Articles Liés

Voir plus