js+div 覆盖层

JavaScript012

js+div 覆盖层,第1张

用juqery框架写如下:

<script type="text/javascript" src="js/jquery.js"></script>

<div style="position:relative">

<span style="position:absolutez-index:-1" id="change">底层</span>

<img id="ck_img" src="图片" alt="" border="0" />

</div>

<script language="javascript">

$(function(){

$("img#ck_img").click(function(){

$("#change").css("z-index","1")

})

})

</script>

序说明:

要实现一个简单的LightBox效果,主要有两个部分:覆盖层和高亮层。

【跨浏览器的固定定位】

首先要先说说这个东西position:fixed,它的作用是跨浏览器的固定定位。

摘自详解定位与定位应用:

“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。”

程序中很多地方利用了这个css,ie7、ff都支持这个css,但ie6不支持,程序中只能是在ie6模拟这个效果。

【覆盖层】

覆盖层的作用是把焦点限制在高亮层上,原理是通过一个绝对定位的层(通常使用div),设置它的宽度和高度以致能覆盖整个屏幕(包括缩放和滚动浏览器的情况下),再给它设置一个比较高的zIndex来层叠在原有内容之上(但要比高亮层小),这样用户就只能点到这个层之上的内容了。

区别是防水涂料是把混泥土变成防水屏障,JS防水涂料是本身涂料成膜起防水作用,聚合物的水泥基防水涂料是在水泥表面做的一层防水层从表面就可以看见,还有水泥基渗透结晶型防水涂料是渗透到混凝土里表面基本看不出来的。