jQuery hover鼠标悬停图片遮罩透明层滑动特效代码下载


jQuery hover鼠标悬停图片遮罩透明层滑动特效代码下载
jQuery hover鼠标悬停图片遮罩透明层滑动特效代码下载以及鼠标悬停、图片遮罩、透明层滑动等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>

2. HTML代码

<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">
$(".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>

相关推荐

发表评论

相关文章