jQuery仿淘宝icon动画图标特效代码

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

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

以下是 jQuery仿淘宝icon动画图标特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery仿淘宝icon动画图标特效</title>
</head>
<style>
	*{padding: 0;margin: 0;}
	#move{ margin: 40px auto; width: 298px; height: 174px; border: 1px solid #ccc; background-color: #F0F0F0; }
	#move a{display: inline-block;
			width: 58px;height: 25px;
			border: 1px solid #ddd;
			border-radius: 3px;
			background-color: #fff;
			text-align: center;
			margin: 10px 17px;
			position: relative;
			padding-top: 40px;
			color: #9c9c9c;
			font-size: 12px;
			text-decoration: none;
			line-height: 25px;
			overflow: hidden;
	}
	#move a i{position: absolute;top: 12px;left: 0;display: inline-block;width: 100%;text-align: center;filter:alpha(opacity=100);opacity: 1;}
	#move a:hover{color: #f00;}
	#move img{border:none;width: 50%}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
	$(function () {
		$('#move a').mouseenter(function  () {
			$(this).find('i').animate({top:"-25px",opacity:"0"},300,function () {
				$(this).css({top:'25px'});
				$(this).animate({top:'12px',opacity:'1'},600)
			})
		})
	})
</script>
<body>
<div id="move">
	<a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
	<a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a>
	<a href="#"><i><img src="images/zhu3.png"></i><p>租房</p></a>
	<a href="#"><i><img src="images/zhu4.png"></i><p>租房</p></a>
	<a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
	<a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a>
</div>
</body>
</html>

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