jQuery implementiert Code für Mausaufforderungseffekte, der QQ Space Dress-up Preview picture

jQuery implementiert Code für Mausaufforderungseffekte, der QQ Space Dress-up Preview picture_jquery imitiert

WBOY

Freigeben： 2016-05-16 15:34:19

Original

1321 Leute haben es durchsucht

Dieser Artikel beschreibt das Beispiel der jQuery-Implementierung des Mausaufforderungseffektcodes, der das QQ-Space-Dress-up-Vorschaubild imitiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Mausaufforderungseffekt, der das Vorschaubild von Tencent QQ Space imitiert. Er erkennt die Einführungsinformationen des Bildes. Wenn Sie die Maus über das Bild bewegen, ändert sich der Hintergrund des Bildes Der entsprechende Textinhalt des Bildes ist der im QQ-Bereich verwendete Effekt.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿QQ空间装扮预览图片的鼠标提示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font-size:12px;line-height:150%;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
#wrap{width:900px;margin:0 auto;}
.good_list{padding:0 0 30px 13px;background:#f8f8f8;border:1px solid #eaeaea;margin-top:50px;}
.item{float:left;margin:13px 13px 0 0;position:relative;}
.good{padding:8px;}
.goodOp{padding:2px;border:1px solid #a8a8a8;width:180px;background:#fff;font-size:0;}
.goodHover{padding:0px;position:absolute;z-index:99666669;top:-40px;left:-4px;width:210px;height:204px;}
.goodHd{background:url(images/imgHover.png);width:210px;height:204px;}
.goodHd h2{font-size:12px;text-align:center;padding-top:12px;}
.goodHd p{color:#9c9c9c;text-align:center;}
.goodHd .img{padding-left:12px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $("#list>.item").hover(function(){
  $(this).find(".goodHover").show();
 },function(){
  $(this).find(".goodHover").hide();
 });
});
</script>
</head>
<body>
<div id="wrap">
 <div class="good_list clearfix" id="list">
  <div class="item" style="z-index:10">
  <div class="good">
   <div class="goodOp"><img src="images/1.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/1.gif"></div>
   </div>
  </div>
  </div>
 </div>
 <div class="item" style="z-index:9">
  <div class="good">
   <div class="goodOp"><img src="images/2.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/2.gif"></div>
   </div>
  </div>
  </div>
 </div>
 <div class="item" style="z-index:8">
  <div class="good">
   <div class="goodOp"><img src="images/3.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/3.gif"></div>
   </div>
  </div>
  </div>
 </div>
 <div class="item" style="z-index:7">
  <div class="good">
   <div class="goodOp"><img src="images/4.gif"></div>
  </div>
  <div class="goodHover" style="display:none">
   <div class="goodHd">
   <h2>西班牙</h2>
   <p>点击图片预览装扮</p>
   <div class="img">
    <div class="goodOp"><img src="images/4.gif"></div>
   </div>
  </div>
  </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.