标签：
在网页上总是看到这样的效果：将鼠标放到一个小格子里，小格子变暗，同时显示出来一些文字。一直比较好奇，今天我也简单的实现了一下，如果有不对或者更好的方法，请指教。
总体思路是，构建一个新的div，用来覆盖图片并显示字，鼠标移动到img上时即可显示div，移出img时div会消失。
1、构建基本页面：
<div id="ten_model">
<ul id="little_imgs">
<li id="li1"><img src="" height="120" width="120"></li>
<li id="li2"><img src="" height="120" width="120"></li>
<li id="li3"><img src="" height="120" width="120"></li>
<li id="li4"><img src="" height="120" width="120"></li>
<li id="li5"><img src="" height="120" width="120"></li>
<li id="li6"><img src="" height="120" width="120"></li>
<li id="li7"><img src="" height="120" width="120"></li>
<li id="li8"><img src="" height="120" width="120"></li>
<li id="li9"><img src="" height="120" width="120"></li>
<li id="li0"><img src="" height="120" width="120"></li>
</ul>
</div>
以上是十个基本的图片的HTML代码，放到一个ul里面。
1 ul#little_imgs { 2 list-style: none; 3 position: relative; 4 width: 300px; 5 height: auto; 6 } 7 8 ul#little_imgs li { 9 width: 120px; 10 height: 120px; 11 float: left; 12 margin: 3px; 13 }
以上是对于ul和li的css修饰，让其每两个一行，一共五行两列。
<div id="show_model"> <p></p> </div>
div#show_model {
width: 120px;
height: 120px;
background-color: black;
opacity: .7;
position: absolute;
left: 0;
top: 0;
display: none;
}
以上是鼠标移动到每个li上时，li上面显示的div，目的是有变暗效果（通过opacity实现）和文字显示（<p></p>）。
2、添加JavaScript效果：
$("#little_imgs li").mouseover(function(){
var ll = $(this).offset().left;
var tt = $(this).offset().top;
$("#show_model").css("left",ll-2);
$("#show_model").css("top",tt-2);
var li_id = $(this).attr("id");
if(li_id == ‘li1‘){
$("#show_model p").html("L");
}else if(li_id == ‘li2‘){
$("#show_model p").html("o");
}else if(li_id == ‘li3‘){
$("#show_model p").html("A");
}else if(li_id == ‘li4‘){
$("#show_model p").html("B");
}else if(li_id == ‘li5‘){
$("#show_model p").html("N");
}else if(li_id == ‘li6‘){
$("#show_model p").html("Li");
}else if(li_id == ‘li7‘){
$("#show_model p").html("D");
}else if(li_id == ‘li8‘){
$("#show_model p").html("Na");
}else if(li_id == ‘li9‘){
$("#show_model p").html("Ra");
}else if(li_id == ‘li0‘){
$("#show_model p").html("RB");
}
$("#show_model").css("display","block");
});
$("#show_model").mouseover(function(){
$(this).css("display","block");
});
$("#show_model").mouseout(function(){
$(this).css("display","none");
});
$("#ten_model").mouseout(function(){
$("#show_model").css("display","none");
});
利用jQuery，当鼠标移动到每一个li上时，获取li的top和height，并赋值给show_model，并给show_model的p赋值文字，让其显示出来，出现的问题就是最开始上面的覆盖层会不停地闪，后来分析发现：当鼠标移动到li上时，会显示出show_model的div但是此时鼠标已经离开了li，因此show_model的div会消失，一旦消失，鼠标又落在了li上，因此show_model的div又会显示出来，如此往复。解决的办法是将show_model的div加上mouseover事件，当在其上时，div不会消失。
场景基本实现，如果要给img图片添加click事件，因为有div的阻挡，会有影响，解决的方法是：将click事件分成两部分，mousedown时让div消失，mouseup时添加img图片本来的click事件即可。
标签：
原文地址：http://www.cnblogs.com/yandi/p/4831984.html
