jquery hover图片遮罩层滑动滚动特效代码

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

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

以下是 jquery hover图片遮罩层滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>jquery hover图片遮罩层滑动</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}/*清楚内外默认边距*/
body{background:url("images/bg.jpg");}
.web{width:985px;height:620px;background:#cb5412;margin:0px auto;}
.con{width:950px;height:435px;background:#fff;margin:27px auto;padding-left:25px;padding-top:25px;}
.con ul li{width:297px;height:198px;float:left;margin-right:15px;margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer;}
.txt{width:297px;height:45px;background:rgba(0,0,0,0.6);/*透明背景色，不透明其文字内容*/position:absolute;left:0;bottom:0;color:#fff;font-family:"微软雅黑";}
.txt h3{font-size:20px;font-weight:100;height:45px;text-align:center;line-height:45px;}
.txt p{font-size:14px;text-align:center;}
</style>

</head>
<body>

<div class="web">
	<img src="images/course.jpg"/>
	<div class="con">
		<ul>
			<li>
				<img src="images/class1.jpg"/>
				<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
				</div>
			</li>
			<li>
				<img src="images/class2.jpg"/>
				<div class="txt">
					<h3>语言学习</h3>
					<p>英语、韩语、日语各类语言课程一网打尽</p>
				</div>
			</li>
			<li>
				<img src="images/class3.jpg"/>
				<div class="txt">
					<h3>职业技能</h3>
					<p>传授会计师、建筑师等各类考证学习宝典</p>
				</div>
			</li>
			<li>
				<img src="images/class4.jpg"/>
				<div class="txt">
					<h3>中小学/大学</h3>
					<p>小学、初中、高中各科课程在线辅导</p>
				</div>
			</li>
			<li>
				<img src="images/class5.jpg"/>
				<div class="txt">
					<h3>兴趣爱好</h3>
					<p>吉他、摄影等各类兴趣教程让你成为生活达人</p>
				</div>
			</li>
			<li>
				<img src="images/class6.jpg"/>
				<div class="txt">
					<h3>亲子学堂</h3>
					<p>教你如何和宝宝一起成长</p>
				</div>
			</li>
		</ul>
	</div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".con ul li").hover(function(){
	$(this).find(".txt").stop().animate({height:"198px"},400);
	$(this).find(".txt h3").stop().animate({paddingTop:"60px"},400);
},function(){
	$(this).find(".txt").stop().animate({height:"45px"},400);
	$(this).find(".txt h3").stop().animate({paddingTop:"0px"},400);
})
</script>
</body>
</html>

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