图片居中放大
1.外层一个固定宽高的div,背景图片，相对定位position：relative;
2.div里面包含一个img标签，初始宽高为0px；绝对定位position：absolute;top:div的高度/2；left:div的宽度/2；
3.鼠标移入事件时，改变img的宽高，改变定位，top和left变为0；
html:
<div style="width:100px;height:100px;position:relative;background:url(../images.png) no-repeat;">
< img src="../images.png" />
</div>
js:
<script>
$(".img").hover(function(){
//鼠标移入时
$(".img").stop().animate({height:"100px",width:"100px",left:"0px",top:"0px"});
},function(){
//鼠标移出时
$(".img").stop().animate({height:"0px",width:"0px",left:"50px",top:"50px"});
});
</script>
背景图片变换动画
1.固定宽高的div,背景图做成雪碧图（两张图片宽高一致），初始时background-position-y:0px 0px;
ys1_bg.png
2.鼠标移入事件时,改变background-position-y，变为一张图片高度的值即可，此处为上下图片，左右图片同理，改变background-position-x:;为一张图片的宽度值
html:
<style>
.div{background-image:url(../images.png);background-position-x:0px;background-position-y:0px;}
</style>
<div class="div">
</div>
js:
<script>
$(".div").hover(function(){
$(this).stop().animate({
"background-position-x":"0px",
"background-position-y":"192px"
},500);
},function(){
$(this).stop().animate({
"background-position-x":"0px",
"background-position-y":"0px"
},500);
});
</script>
