正文
【锋利的JQuery-学习笔记】遮罩层
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
效果图：
鼠标移动到上面后--->
html：
<div id="jnBrandList">
<ul>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/2014050201.jpg" /></a>
<span><a href="###1">书1</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/2014050202.jpg" /></a>
<span><a href="###2">书2</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/2014050203.jpg" /></a>
<span><a href="###3">书3</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data: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:;
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;width:' + 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");
});
*/
});
