圖片居中放大
1.外層一個(gè)固定寬高的div,背景圖片屿愚，相對定位position：relative;
2.div里面包含一個(gè)img標(biāo)簽，初始寬高為0px湘今；絕對定位position：absolute;top:div的高度/2巢钓；left:div的寬度/2；
3.鼠標(biāo)移入事件時(shí)惩嘉，改變img的寬高，改變定位踢故，top和left變?yōu)?文黎；
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(){
//鼠標(biāo)移入時(shí)
$(".img").stop().animate({height:"100px",width:"100px",left:"0px",top:"0px"});
},function(){
//鼠標(biāo)移出時(shí)
$(".img").stop().animate({height:"0px",width:"0px",left:"50px",top:"50px"});
});
</script>
背景圖片變換動(dòng)畫
1.固定寬高的div,背景圖做成雪碧圖（兩張圖片寬高一致）惹苗，初始時(shí)background-position-y:0px 0px;
ys1_bg.png
2.鼠標(biāo)移入事件時(shí),改變background-position-y，變?yōu)橐粡垐D片高度的值即可耸峭，此處為上下圖片桩蓉，左右圖片同理，改變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>
