Maison > Article > interface Web > jQuery crée un effet accordéon translucide vertical

jQuery crée un effet accordéon translucide vertical

php中世界最好的语言original: 2018-04-25 11:38:511721parcourir

Cette fois, je vais vous présenter jQuery pour créer un effet accordéon translucide vertical. Quelles sont les précautions pour jQuery pour créer un effet accordéon translucide vertical. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Rendu des opérations :

Le code accordéon du tiroir translucide jQuery partagé avec vous est le suivant

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery半透明抽屉式手风琴代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.pic{width:1100px;height:430px;margin:70px auto 0;}
.pic ul li{list-style:none;width:100px;height:429px;float:left;}
.pic .l1{background-image:url(img/1.jpg);}
.pic .l2{background-image:url(img/2.jpg);}
.pic .l3{background-image:url(img/3.jpg);}
.pic .l4{background-image:url(img/4.jpg);width:789px;}
.txt{width:100px; height:429px;background:#000;filter:alpha(opacity=50);background:rgba(0,0,0,.5);}
.txt p{color:#fff;font-family:"微软雅黑";float:left;position:relative;}
.txt .p1{font-size:12px;width:12px;margin:25px 25px 0 20px;}
.txt .p2{font-size:14px;width:14px;margin-top:25px;}
</style>
</head>
<body>
<p class="pic">
 <ul>
 <li class="l1">
  <a href="http://www.php.cn" target="_blank">
  <p class="txt">
   <p class="p1">作者 ： 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </p>
  </a>
 </li>
 <li class="l2">
  <a href="http://www.php.cn" target="_blank">
  <p class="txt">
   <p class="p1">作者 ： 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </p>
  </a>
 </li>
 <li class="l3"> 
  <a href="http://www.php.cn" target="_blank">
  <p class="txt">
   <p class="p1">作者 ： 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </p>
  </a>
 </li>
 <li class="l4">     
  <a href="http://www.php.cn" target="_blank">
  <p class="txt">
   <p class="p1">作者 : 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </p>
  </a>
 </li>
 </ul>
</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".pic ul li").hover(function(){
 $(this).stop(true).animate({width:"789px"},500).siblings().stop(true).animate({width:"100px"},500);
});
</script>
</body>
</html>

Je crois que vous avez lu cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Jquery implémente un changement de sélection aléatoire lors de l'ouverture de la page

jQuery crée un effet carrousel d'images réactif

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!

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：JQuery implémente le menu de la barre latéraleArticle suivant：JQuery implémente le menu de la barre latérale

Articles Liés

Voir plus