原生鼠标悬停图片文字动画效果
2015-02-12 22:29:47 访问(2062) 赞(0) 踩(0)
-
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生鼠标悬停图片文字动画效果</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
#slowx{ height:auto; width:820px;margin:100px auto; overflow:hidden;}
#slowx ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}
#slowx ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(<%=strWebPhyPath%>/images/js/dot.png) repeat; font-size:12px; color:#fff;}
#slowx ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}
#slowx ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}
</style>
</head>
<body>
<%=VersionHideInfo%>
<!-- 代码部分begin -->
<div id="slowx">
<ul>
<li>
<a href="<%=strWebPhyPath%>/nav"><img src="<%=strWebPhyPath%>/images/js/pic1.png" alt="" width="396" height="165" /></a>
<div class="text">
<b>菜单导航</b>
<p>菜单导航栏目 - 是霜叶工作室下设的一个主要栏目，收集了大量互联网上的导航代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="<%=strWebPhyPath%>/tab"><img src="<%=strWebPhyPath%>/images/js/pic2.png" alt="" width="396" height="165" /></a>
<div class="text">
<b>tab标签</b>
<p>tab标签，是霜叶工作室下设的一个主要栏目，收集了大量互联网上的tab标签代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="<%=strWebPhyPath%>/service"><img src="<%=strWebPhyPath%>/images/js/pic3.png" alt="" width="396" height="165" /></a>
<div class="text">
<b>QQ在线客服代码</b>
<p>在线客服 - 是霜叶工作室下设的一个主要栏目，收集了大量互联网上的在线客服代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="<%=strWebPhyPath%>/pic"><img src="<%=strWebPhyPath%>/images/js/pic4.png" alt="" width="396" height="165" /></a>
<div class="text">
<b>图片特效</b>
<p>图片特效 - 是霜叶工作室下设的一个主要栏目，收集了大量互联网上的图片特效代码，内容涵盖量最广泛，最实用</p></div>
</li>
</ul>
</div>
<script type="text/javascript" language="javascript" src="<%=jQuery%>"></script>
<script type="text/javascript" language="javascript" >
$(function(){
$('#slowx li').hover(function(){
$('.text',this).stop().animate({
height:'165px'
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
参考来源：懒人之家
上一条：
下一条：
版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
相关评论
发表评论