Heim > Artikel > Web-Frontend > jQuery erzeugt einen vertikalen durchscheinenden Akkordeoneffekt

jQuery erzeugt einen vertikalen durchscheinenden Akkordeoneffekt

php中世界最好的语言Original: 2018-04-25 11:38:511752Durchsuche

Dieses Mal bringe ich Ihnen jQuery, um einen vertikalen durchscheinenden Akkordeoneffekt zu erzeugen. Was sind die Vorsichtsmaßnahmen für jQuery, um einen vertikalen durchscheinenden Akkordeoneffekt zu erzeugen?

Operationsrendering:

Der mit Ihnen geteilte jQuery-Code für das durchscheinende Schubladen-Akkordeon lautet wie folgt

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

Ich glaube, Sie werden den Fall lesen In diesem Artikel beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Jquery implementiert einen zufälligen Auswahlwechsel beim Öffnen der Seite

jQuery erzeugt einen responsiven Bildkarusselleffekt

Das obige ist der detaillierte Inhalt vonjQuery erzeugt einen vertikalen durchscheinenden Akkordeoneffekt. 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：JQuery implementiert ein SeitenleistenmenüNächster Artikel：JQuery implementiert ein Seitenleistenmenü

In Verbindung stehende Artikel

Mehr sehen