<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片放大</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css" media="screen">
*{margin:0; padding:0;}
ul,li{margin-right: 0; padding:0;}
li{list-style:none;}
a{text-decoration: none;}
.clearfix:before,.clearfix:after{display: table; content: "";}
.clearfix:after{overflow: hidden; clear: both;}
.clearfix{zoom:1;}
body{width: 100%; height: 100%; background-color: #000; _position: relative; overflow:hidden;}
#box{width:366px; margin:0 auto; position: relative;}
#box li{width:100px; height:100px; border:1px solid #ddd; background:green; margin:10px; float:left; color:#fff; line-height: 24px; filter:alpha(opacity=40); opacity: 0.4}
</style>
<!-- <script src="startmove.js"></script> -->
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startmove(obj, json,fn){
clearInterval(obj.timer);
obj.timer= setInterval(function(){
var flag = true;
for(var attr in json){
// 取当前值
var iCur = 0;
if(attr == 'opacity'){
iCur= parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur= parseInt(getStyle(obj,attr));
}
// 计算速度
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
// 检测所有的运动是否都结束了，如果没有，继续运动
if(iCur != json[attr]){
flag = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
obj.style.opacity = (iCur + iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
// 如果所有运动都结束了，那flag则为true,那就停止所有定时器，
if(flag){
clearInterval(obj.timer);
// 运动结束时，回调函数
if(fn){
fn();
}
}
},30);
}
</script>
<script>
window.onload = function(){
var oUl = document.getElementById('box');
var aLi = oUl.getElementsByTagName('li');
var minZindex = 1;
// 布局转换
for(var i=0; i<aLi.length; i++){
aLi[i].innerHTML = 'left:' + aLi[i].offsetLeft + '<br>top:' + aLi[i].offsetTop;
aLi[i].style.left = aLi[i].offsetLeft + 'px';
aLi[i].style.top = aLi[i].offsetTop + 'px';
}
for(var i=0; i<aLi.length; i++){
aLi[i].style.margin = 0;
aLi[i].style.position = 'absolute';
}
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover =function(){
startmove(this,{width:200,height:200,marginLeft:-50, marginTop:-50,opacity:100});
// z-index极限值为2的31次方
this.style.zIndex = minZindex++;
}
aLi[i].onmouseout =function(){
startmove(this,{width:100,height:100,marginLeft:0, marginTop:0,opacity:40});
}
}
}
</script>
</head>
<body>
<ul class="clearfix" id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>原文：http://blog.csdn.net/ruizhengyun/article/details/37994775