jQuery制作漂亮的鼠标移入移出遮罩图层效果

文章内容

分享一个jQuery制作的漂亮的鼠标移入移出效果

引入必要文件

<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery/2.1.1/jquery.min.js"></script>

html代码

<div class="main">
    <div class="bgx">
        <div class="main_img">
            <div class="box">
            </div>
        </div>
    </div>
</div>

引用js代码

<script type="text/javascript">
    $(function () {
        $('.main_img').bind('mouseover', function () {
            var oPosition = $(this).position();
            var oThis = $(this);
            $('.box').queue('fnHide');
            if ($(".box").attr('deta-switch') !== 'true') {
                $(".box").attr('deta-switch', 'true');
                $(".box").css({
                    width: '90%',
                    height: '431px',
                    left: '0px',
                    top: '0px',
                    opacity: 0,
                    display: 'block'
                })
            }
            $(".box").stop(false, false).animate({
                opacity: 0.3,
                left: oPosition.left + 0,
                top: oPosition.top + 0,
                width: oThis.width() - 2,
                height: '431px'
            }, 250)
        });

        $('.main_img').bind('mouseout', function () {
            var oPosition = $(this).position();
            var oThis = $(this);
            $('.box').queue('fnHide');
            if ($(".box").attr('deta-switch') !== 'true') {
                $(".box").attr('deta-switch', 'true');
                $(".box").css({
                    width: '90%',
                    height: $(window).height(),
                    left: '0px',
                    top: '0px',
                    opacity: 0,
                    display: 'none'
                })
            }
            $(".box").stop(false, false).animate({
                opacity: 0.3,
                left: -oThis.width(),
                top: oPosition.top + 0,
                width: oThis.width() - 2,
                height: '431px'
            }, 250)
        });
    })
</script>

index.css代码

 .main .main_img
{
    width: 100%;
    height: 431px;
    background: url(../images/bg.jpg) no-repeat center center;
}
.box
{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    border: 1px solid white;
    z-index: 4;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
}
.bgx
{
    width: 100%;
    background: #000000;
}