信鸽网

jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

  作者：bea

本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码。分享给大家供大家参考，具体如下： 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果，感应鼠标显示图片的介绍信息，当你把鼠标移到图片上的时候，图片的背景会有所变化，并会显示该图片的对应文字内容，是QQ空间使用过的效果。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下： <!DOCT

本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码。分享给大家供大家参考，具体如下：


这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果，感应鼠标显示图片的介绍信息，当你把鼠标移到图片上的时候，图片的背景会有所变化，并会显示该图片的对应文字内容，是QQ空间使用过的效果。


运行效果截图如下：



在线演示地址如下：


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


具体代码如下：




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


希望本文所述对大家jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: