这里一共有3个事件mouseover、mouseout、mousemove,分别用来进行获取显示大图,隐藏大图以及移动大图。

<div class="htl_pic" id="picList">
    <div class="pic1"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic2"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic3"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic4"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic5"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic6"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic7"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic8"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
    <div class="pic9"><div _src="big.jpg" style="background-image:url(small.jpg);"></div></div>
</div>
<div id="popPic" class="hotel_pic_top" style="position:absolute;display:none;"><img src="http://pic.c-ctrip.com/common/pic_alpha.gif" onerror="this.src='http://pic.c-ctrip.com/hotels121118/bg_nopic2.png';" /></div>

HTML里面,div上的自定义属性_src用来存放大图地址,当鼠标移到div上是可以获取对应的src,#popPic下的img用来显示大图,onerror可以防止图片404或者读取失败。

var overPic = '';
var popPic = document.getElementById('popPic');
var picList = document.getElementById('picList');
addEvent(picList, 'mouseover', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName == 'DIV') {
        var newPic = target.getAttribute('_src');
        if (!newPic) return;
        if (overPic != newPic) {
            popPic.getElementsByTagName('img')[0].src = newPic;
            overPic = newPic;
        }
        popPic.style.display = '';
    }
});

mouseover时候判断下事件源是否是div,获取_src显示大图。

addEvent(picList, 'mouseout', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName == 'DIV') { 
        overPic = ''; 
        popPic.style.display = 'none'; 
        popPic.style.top = '-1000px'; 
        popPic.getElementsByTagName('img')[0].src = 'http://pic.c-ctrip.com/common/pic_alpha.gif';
    }
});

mouseout触发的时候事件源是当前移出的对象,所以判断下是否是div,把浮层隐藏。

dhtmopos

var mousePosition = function (ev) {
    //如上图可以知道对应的范围
    return { 
        left: document.documentElement.scrollLeft || document.body.scrollLeft, //滚动条左侧宽度 
        top: document.documentElement.scrollTop || document.body.scrollTop, //滚动条高度 
        x: ev.clientX, //鼠标X轴坐标,相对于窗口左上角 
        y: ev.clientY, //鼠标Y轴坐标,相对于窗口左上角 
        width: document.documentElement.clientWidth, //窗口宽度 
        height: document.documentElement.clientHeight //窗口高度
    }
}
addEvent(picList, 'mousemove', function (e) {
    e = e || window.event;
    if (overPic) { 
        var mouse = mousePosition(e); //大图尺寸为558 * 420
        popPic.style.left = (mouse.width - 560 < mouse.x ? mouse.x - 570 : mouse.x + 10) + mouse.left + 'px';
        popPic.style.top = Math.min(mouse.height - 420, mouse.y + 10) + mouse.top + 'px';
    }
});

我们通过mousePosition函数来获取我们需要的数据集合,在mousemove的时候修改浮层的位置。

1、首先我们会想到的是浮层位置即鼠标位置。

popPic.style.left = mouse.x + mouse.left + 'px';
popPic.style.top = mouse.y + mouse.top + 'px';
//这样图片就会紧跟着鼠标右下角显示,但是鼠标快速右下移动的时候会发现鼠标会移动到浮层上导致效果不理想,为了解决这个问题我们可以给left/top各加10px。
popPic.style.left = mouse.x + 10 + mouse.left + 'px';
popPic.style.top = mouse.y + 10 + mouse.top + 'px';

2、单单这样还是不够的,当hover的小图位置靠右或靠下时大图就会超出窗口显示范围,所以我们需要有选择的去改变left/top。

第一步,如何判断浮层水平右侧是否超过显示范围,窗口显示宽度 – 浮层宽度 即是临界点,鼠标在该值右侧就会超出范围,反之就不会超出

popPic.style.left = (mouse.width - 560 < mouse.x ? mouse.x - 570 : mouse.x + 10) + mouse.left + 'px';
//mouse.width - 560 < mouse.x 为true时即超出范围,我们就给left赋值mouse.x-558-10,让整个浮层就出现在鼠标的左侧,反之就取mouse.x+10正常显示。

第二步,判断垂直方向,当下方超出显示范围时,我们让浮层底部始终紧贴着窗口底部,那么这时浮层的top就是窗口高度-浮层高度即可。

popPic.style.top = Math.min(mouse.height - 420, mouse.y + 10) + mouse.top + 'px';
//这里我们不用像水平方向一样去做大于小于判断,只需要取mouse.height - 420和mouse.y + 10的最小值即可,原因么?大家想象下超出范围与不超出范围两种情况时的top值就知道了。

Demo:http://unicac.sinaapp.com/jquery/imgMove.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注