jquery左侧居中链接图片动画效果代码

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

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

以下是 jquery左侧居中链接图片动画效果代码的示例演示效果:

当前平台(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" />
<title>jquery左侧居中链接图片动画效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
body{ background:#ccc;}

.zzsc{ width:50px; height:250px; position:fixed; left:0; top:50%; margin-top:-125px; z-index:900;}
.zzsc a{ width:50px; height:50px; line-height:50px; float:left; display:block; text-align:right;}
.zzsc .lanren1{ background:#305790;}
.zzsc .lanren2{ background:#2BA9D2;}
.zzsc .lanren3{ background:#CF4C3A;}
.zzsc .lanren4{ background:#4698CA;}
.zzsc .lanren5{ background:#F9694E;}
</style>
</head>
<body>
<div class="zzsc">
	<a href="#" class="lanren1"><img src="images/zzsc01.jpg" alt="内容" width="50" height="50" /></a>
	<a href="#" class="lanren2"><img src="images/zzsc02.jpg" alt="内容" width="50" height="50" /></a>
	<a href="#" class="lanren3"><img src="images/zzsc03.jpg" alt="内容" width="50" height="50" /></a>
	<a href="#" class="lanren4"><img src="images/zzsc04.jpg" alt="内容" width="50" height="50" /></a>
	<a href="#" class="lanren5"><img src="images/zzsc05.jpg" alt="内容" width="50" height="50" /></a>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
	$('.zzsc a').hover(function(){
		$(this).animate({width:'65px'},300);	
	},function(){
	$(this).animate({width:'50px'},300);	
	});
});
</script>
</body>
</html>

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