为什么不能通用js实现 遮罩层的left自主移动效果？
上半部分我省掉了， 这里为什么我不管移到哪张图片， 遮罩层的left都不变？
mask.style.left=getStyle(this,"left"); 这句不起作用， 为什么？ 请高手指点一下， 谢谢！
<title>无标题文档</title>
<style>
* { padding:0; margin:0;}
body{ font-family:"宋体" ; font-size:14px;color:#FFF;background:#FFF; text-align:center;}
ol, ul ,li{ margin:0; padding:0;list-style:none}
img {border: 0; vertical-align:middle}
a, a:hover{text-decoration:none}
#box { border:1px solid #999999; height:170px; margin:0 auto; margin-top:50px; position:relative;}
#box img { float:left; margin-right:10px; z-index:1;}
#mask { width:300px; height:170px; background-color: RGBA(0,0,0,.7); position:absolute; z-index:2; display:none;}
.clear{margin:0;padding:0;border:0;clear:both;}
</style>
<script type="text/javascript">
window.onload=function() {
var box=document.getElementById("box");
var img=box.getElementsByTagName("img");
var mask=document.getElementById("mask");
box.style.width=parseInt(getStyle(img[0],"width"))*3+30+"px";
for (i=0;i<img.length;i++) {
img[i].onmouseover=function() { mask.style.left=getStyle(this,"left"); mask.style.display="block"; };
img[i].onmouseout=function () { mask.style.display="none"; };
}
function getStyle(obj,attr){
if(obj.currentStyle){ return obj.currentStyle[attr]; }
else { return getComputedStyle(obj,false)[attr]; }
}
}
</script>
</head>
<body>
<div id="box" >
<img src="1.jpg" width="300" height="170" index="1" />
<img src="2.jpg" width="300" height="170" index="2" />
<img src="3.jpg" width="300" height="170" index="3" />
<div id="mask"></div>
</div>
</body>
</html>
