特效：
鼠标放在图片上，图片背景放大
效果如上图，鼠标放上去，图片就放大，移开鼠标，图片恢复原样
<html>
<head>
<meta charset="utf-8">
<title>图片中间放大-改成绝对定位</title>
<script type="text/javascript" src="js/base.js"></script>
<style type="text/css">
body,ul,li,img{margin:0px;padding:0px;}
ul,li{list-style:none;}
#ul1{
width:660px;
margin:15px auto;
border:10px solid #ccc;
height:540px;
position:relative;
z-index:1;
}
#ul1::after{
}
#ul1 li{
width:200px;
height:160px;
margin:10px;
float:left;
overflow:hidden;
}
#ul1 li img{
display:block;
width:200px;
height:160px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("ul1");
var oUlLi=oUl.getElementsByTagName("li");
var oUlIMG=oUl.getElementsByTagName("img");
var isZindex=1;
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].style['left']=oUlLi[i].offsetLeft;
oUlLi[i].style['top']=oUlLi[i].offsetTop;
}
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].style['position']="absolute";
oUlLi[i].style['margin']="0px";
}
for(var i=0;i<oUlIMG.length;i++){
oUlIMG[i].onmouseover=function(ev){
var obj=this;
obj.parentNode.style['zIndex']=isZindex++;
song(this).startMove({width:240,height:192,marginTop:-16,marginLeft:-20},350);
//starMove(obj,{width:240,height:192,marginTop:-16,marginLeft:-20},1);
};
oUlIMG[i].onmouseout=function(ev){
var obj=this;
song(obj).startMove({width:200,height:160,marginTop:0,marginLeft:0},350);
//starMove(obj,{width:200,height:160,marginTop:0,marginLeft:0},1);
};
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
</body>
</html>