<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,图片信息,图片特效,滑动特效,jquery特效,JS图片特效,JS广告代码，JS常用代码" />
<meta name="description" content="jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效，更多图片信息,图片特效,滑动特效,jquery特效代码请访问脚本之家JS代码频道。" />
<title>jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效_脚本之家</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
// transition effect
style = 'easeOutQuart';
// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},
function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);
});
</script>
<style>
.photo {
position:relative;
font-family:arial;
overflow:hidden;
border:5px solid #000;
width:350px;
height:233px;
}
.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:50px;
width:350px;
opacity:0.6;
}
.photo .heading {
top:-50px;
}
.photo .caption {
bottom:-50px;
left:0px;
}
.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#999;
font-size:9px;
display:block;
padding:5px 10px 0 10px;
}
</style>
</head>
<body>
<div class="photo">
<div class="heading"><span>Telephoto Lens</span></div>
<img src="images/fall.jpg" width="350" height="233" alt="" />
<div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div>
</div>
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net" target="_blank">网络</a> 代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢：<a href="http://www.jb51.net" target="_blank">爱代码</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
