jquery显示标题和字母js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery显示标题和字母js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<link href="css/zzsc.css" type="text/css" rel="stylesheet">
</head>
<body>
<center><br>
<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></center>
</body>
</html>

CSS代码(zzsc.css):

@charset "utf-8";.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;}

附件:下载该文件资源,减少时间成本(增值服务)