jQuery缩略图遮罩层_图片代码_遮罩层_动画_遮罩层

本文的图片遮罩层是仿照百度的图片效果，当鼠标悬浮在某个遮罩层的时候，阴影层就停留在当前图片，遮罩层会一直随着鼠标移动。

淘建站为您提供更多_图片代码_遮罩层_动画_遮罩层，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 435 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 遮罩层难易程度：初级

遮罩层样式

.mask{width:100%;height:100%;background:#000;position: absolute;display: none;opacity:0.5;}

图片和遮罩层结构

<div class="page_container">
    <div class="container">
        <img src="sucaiq.jpg" width="220" height="210" alt="http://www.sucaiq.com" />
        <div class="mask"></div>
    </div>
    <div class="container">
        <img src="sucaiq.jpg" width="220" height="210" alt="" />
        <div class="mask"></div>
    </div>
</div>

鼠标悬浮和离开图片事件

$(".container").bind("mouseenter mouseleave", function(e) {
    var w = $(this).width();
    var h = $(this).height();
    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
    var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
    //alert(x);
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
    //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
    var eventType = e.type;
    //alert(e.type);
    if (e.type == 'mouseenter') {
        if (direction == 0) {
            $(this).find('.mask').css({'display': 'block', 'top': -h + 'px', 'left': '0px'}).animate({'top': '0px'});
        } else if (direction == 1) {
            $(this).find('.mask').css({'display': 'block', 'left': w + 'px', 'top': '0px'}).animate({'left': '0px'});
        } else if (direction == 2) {
            $(this).find('.mask').css({'display': 'block', 'top': h + 'px', 'left': '0px'}).animate({'top': '0px'});
        } else if (direction == 3) {
            $(this).find('.mask').css({'display': 'block', 'left': -w + 'px', 'top': '0px'}).animate({'left': '0px'});
        }
    } else {
        if (direction == 0) {
            $(this).find('.mask').animate({'top': -h + 'px'});
        } else if (direction == 1) {
            $(this).find('.mask').animate({'left': w + 'px'});
        } else if (direction == 2) {
            $(this).find('.mask').animate({'top': h + 'px'});
        } else if (direction == 3) {
            $(this).find('.mask').animate({'left': -w + 'px'});
        }
    }
});