html

 <p class="small_pic">
    <span class="float_layer"></span>
</p>

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(p, '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的位置？？？