首页 > 为什么会遮罩会复原???

为什么会遮罩会复原???

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就会复原,如果鼠标一直移动就不会复原,不信你试试

【热门文章】
【热门文章】