html
<div class="small_pic">
<span class="float_layer"></span>
</div>
css
.small_pic {
width: 350px;
height: 350px;
background: #eee;
}
.float_layer {
width: 100px;
height: 100px;
border: 1px solid #000;
background: #fff;
filter: alpha(opacity:30);
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
display: none;
}
js
var small = getByCls(div, 'small_pic')[0];
var layer = small.getElementsByTagName('span')[1];
small.onmousemove= function (e) {
var e = e || window.event;
layer.style.display = big.style.display = 'block';
layer.style.left= e.offsetX-50+'px';
layer.style.top= e.offsetY-50+'px';
}
function getByCls(obj, cls) {
if (obj.getElementsByClassName) {
return obj.getElementsByClassName(cls);
} else {
var res = [],
reg = new RegExp('^|\\s+' + cls + '\\s+|$'),
all = obj.all;
for (var i = 0; i < all.length; i++) {
if (reg.test(all[i].className)) {
res.push(all[i]);
}
}
return res;
}
}
为什么遮罩移动一下都会复原到0,0的位置???
div的onmousemove好像必须要写在本身内吧,不能以你的那种方式写,复原的原因是因为鼠标在上面移动的时候总有停留的短暂时间,在这停留的时间段内,span就会复原,如果鼠标一直移动就不会复原,不信你试试