【锋利的JQuery-学习笔记】遮罩层

效果图：

  鼠标移动到上面后--->

html：

<div id="jnBrandList">
                            <ul>
                                <li>
                                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                    <span><a href="###1">耐克</a></span>
                                </li>
                                <li>
                                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                    <span><a href="###2">阿迪达斯</a></span>
                                </li>
                                <li>
                                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                    <span><a href="###3">李宁</a></span>
                                </li>
                                <li>
                                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                    <span><a href="###4">安踏</a></span>
                                </li>
                                <li>
                                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                    <span><a href="###1">耐克</a></span>
                                </li>
                                <li>
                                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                    <span><a href="###2">阿迪达斯</a></span>
                                </li>
                                <li>
                                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                    <span><a href="###3">李宁</a></span>
                                </li>
                                <li>
                                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                    <span><a href="###4">安踏</a></span>
                                </li>
                                <li>
                                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                    <span><a href="###1">耐克</a></span>
                                </li>
                                <li>
                                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                    <span><a href="###2">阿迪达斯</a></span>
                                </li>
                                <li>
                                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                    <span><a href="###3">李宁</a></span>
                                </li>
                                <li>
                                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                    <span><a href="###4">安踏</a></span>
                                </li>
                                <li>
                                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/2014050201.jpg" /></a>
                                    <span><a href="###1">书1</a></span>
                                </li>
                                <li>
                                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/2014050202.jpg" /></a>
                                    <span><a href="###2">书2</a></span>
                                </li>
                                <li>
                                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/2014050203.jpg" /></a>
                                    <span><a href="###3">书3</a></span>
                                </li>
                                <li>
                                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/2014050204.jpg" /></a>
                                    <span><a href="###4">书4</a></span>
                                </li>
                            </ul>
                        </div>

css：关键就是用ccs做的效果：

/* imgHover */
.imageMask{
    background-color:#ffffff; 
    filter:alpha(opacity=0);
    opacity: 0;    
    cursor: pointer;
}
.imageOver{
    background:url(../images/zoom.gif) no-repeat 50% 50%;    
    filter:alpha(opacity=60);
    opacity: 0.6;    
}

../images/zoom.gif 是：

js：

$(function () {
    $("#jnBrandList li").each(function (index) {
        var $img = $(this).find("img");
        var imgWidth = $img.width();
        var imgHeight = $img.height();
        
        //为每个图片链接上添加遮罩层，透明度为0
        var spanHtml = '<span style="position:absolute;top:0;left:5px;' + imgWidth + 'px;height:' + imgHeight + 'px;" class="imageMask"></span>'; ;

        $(spanHtml).appendTo(this);
    });

    //遮罩层切换样式
    $("#jnBrandList").delegate(".imageMask", "hover", function () {
        $(this).toggleClass("imageOver");
    });

    /*live函数是为页面加载完后动态加载的元素绑定事件。
    $("#jnBrandList").find(".imageMask").live("hover", function(){
    $(this).toggleClass("imageOver");
    });
    */
});