不少图片类型的网站或者图片相对较多的网站为了起到比较好的美观或者实用化效果,当鼠标滑过图片的时候,一般会弹出一定的文字说明,用语对图片等相关主题进行描述,弹出形式多种多样,本章节分享一段,当鼠标滑过图片能够实现图片上缩,出现文字说明的效果,代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
.holder{
  overflow:hidden;
  width:320px;
  height:333px;
  float:left;
  position:relative;
  background-color:#000;
  margin-right:1px;
}
.holder .image{
  position:absolute;
  left:-100px;
}
.holder span{
  background-color:#333;
  font-size:27px;
  font-family:Arial, Helvetica, sans-serif;
  color:#dedede;
  font-weight:700;
  padding:4px;
  position:absolute;
  top:120px;
  left:4px;
}
.holder .text{
  padding:20px;
  display:none;
  font-family:Arial, Helvetica, sans-serif;
  line-height:26px;
  position:absolute;
  top:180px;
  font-size:16px;
  color:#fff;
  width:340px;
}
.clear{clear: both;}
.main{
  width:1000px;
  height:333px;
  margin:0 auto;
  overflow:hidden;
}
.credit{
  font-size:12px;
  margin-top:25px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $('.holder').hover(function(){
    $(this).removeClass('.notactive'); 
    $('.notactive').stop().animate({'width':'290px'},400); 
    $(this).find('img').stop().animate({'top':'-165px'},400); 
    $(this).stop().animate({'width':'380px'},400); 
    $(this).find('span').css({'background-color':'#000'}); 
    $(this).find('.text').fadeIn(300); 
  },
  function(){
    $('.notactive').stop().animate({'width':'320px'},400); 
    $(this).addClass('.notactive'); 
    $(this).find('.text').hide();
    $(this).find('img').stop().animate({'top':'0px'},500); 
    $(this).stop().animate({'width':'320px'},400);
    $(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); 
  });
});
</script>
</head>
<body>
<div class="main">
  <div class="holder notactive">
    <img class="image" src="mytest/demo/cite.jpg" height=""/>
    <span>自然风光</span>
    <div class="text">爱护自然就是爱护我们自己</div>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

代码描述:jQuery鼠标滑过图片 弹出文字说明。jQuery鼠标滑过图片弹出文字说明代码实例



133 177



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到