為什么不能通用js實(shí)現(xiàn) 遮罩層的left自主移動(dòng)效果？
上半部分我省掉了， 這里為什么我不管移到哪張圖片， 遮罩層的left都不變？
mask.style.left=getStyle(this,"left"); ?這句不起作用， 為什么？ 請高手指點(diǎn)一下， 謝謝！
<title>無標(biāo)題文檔</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>
2016-12-15
flag