<!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="http://www.moobnn.com/" class="lanren1"><img src="images/zzsc01.jpg" alt="网页模板" width="50" height="50" /></a>
<a href="http://www.moobnn.com/" class="lanren2"><img src="images/zzsc02.jpg" alt="网页模板" width="50" height="50" /></a>
<a href="http://www.moobnn.com/" class="lanren3"><img src="images/zzsc03.jpg" alt="网页模板" width="50" height="50" /></a>
<a href="http://www.moobnn.com/" class="lanren4"><img src="images/zzsc04.jpg" alt="网页模板" width="50" height="50" /></a>
<a href="http://www.moobnn.com/" 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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery左侧居中链接图片动画效果.zip
版权申诉
165 浏览量
2022-11-24
12:30:58
上传
评论
收藏 60KB ZIP 举报
jquery左侧居中链接图片动画效果.zip （8个子文件） 
jquery左侧居中链接图片动画效果 jiaoben3143 images 
zzsc02.jpg 2KB zzsc04.jpg 2KB zzsc03.jpg 2KB zzsc01.jpg 2KB zzsc05.jpg 2KB
index.html 2KB js 
jquery-1.8.3.min.js 91KB jquery左侧居中链接图片动画效果.jpg 25KB资源评论
