在网页上总是看到这样的效果:将鼠标放到一个小格子里,小格子变暗,同时显示出来一些文字。一直比较好奇,今天我也简单的实现了一下,如果有不对或者更好的方法,请指教。
总体思路是,构建一个新的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事件即可。