趣订网

介绍一下CSS和JS文件。

css文件：

.hidden div.children {
	display:none;
	padding:0;
	margin:0;
}

其实真正有用的属性就是display:none；毕竟是弹出层，就要用到遮盖，而这个遮盖是一个在class为hidden下class为children的div，这个div在不用的时候需隐藏。

js文件：

var mouseover_tid_1 = [];
var mouseout_tid_1 = [];

$(document).ready(function(){

$('.hidden').each(function(index){
		$(this).hover(

			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid_1[index]);
				mouseover_tid_1[index] = setTimeout(function() {
					$(_self).find('div:eq(0)').slideDown(400);
				}, 100);
			},

			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid_1[index]);
				mouseout_tid_1[index] = setTimeout(function() {
					$(_self).find('div:eq(0)').slideUp(300);
				}, 200);
			}

		);
});

});

这个js相比css文件要复杂了许多，我们慢慢分析，开始定义了两个变量mouSEOver_tid_1 和mouseout_tid_1 并且都初始化为空。

$(document).ready(function()的作用是让这些js效果在页面结构加载完毕后再生效，避免js效果让未加载完毕的页面产生错乱。

$(‘.hidden’).each(function(index)这里使用jquery使所有class为hidden的元素都触发下列效果，并将这个效果命名为index；

$(this).hover(
function(){
var _self = this;
clearTimeout(mouseout_tid_1[index]);
mouseover_tid_1[index] = setTimeout(function() {
$(_self).find(‘div:eq(0)’).slideDown(400);
}, 100);
},

这句的意思是，鼠标进入class为hidden的元素时，触发了一个function效果，var _self = this;定义了一个变量为this，以后可以用$(_self)代替$(this)，用clearTimeout函数清除了下面function的计时，这个会在下面提到

mouseover_tid_1[index] = setTimeout，这句话给mouseover_tid_1[index] 定了个时，$(_self).find(‘div:eq(0)’).slideDown(400);}, 100);这句话让这个元素从index为0开始查找，查找到的层触发slideDown的效果（jquery或js对大小写敏感，代码中该大写的字母不能小写）-以400毫秒的速度拉下显示，并且规定鼠标在这个层上停留100毫秒才生效，好了，其实这里已经开始计时了。

下面的clearTimeout(mouseover_tid_1[index]);正是让鼠标在离开这个div的时候清除这个计时，这里是相互清除计时，因为鼠标进入和离开的时候上下的function都分别计时，任何一个动作都要清楚另一个动作的计时，然后的代码类似上面的，就想锁链一样缠着，只有相互影响才能触发效果。

最后说说html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head>
<title>jquery弹出层demo-final博客</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="a.js" type="text/javascript"></script>
<link rel='stylesheet' id='maincss-css'  href='a.css' type='text/css'/>
</head><body bgcolor="#202020">
<div class="hidden" style="float:left;width:300px;background-color:yellow;position:absolute;">
这是你遮罩层头部
<div class="children" style="float:left;z-index:2;"><div style="background-color:yellow;height:300px;width:300px;float:left;"></div></div>
</div>
<div style="float:left;width:400px;height:1000px;margin-top:20px;">
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
这里写的文字触发遮罩层后会被遮住<br/>
</div>
</body></html>

主要说一下怎么运用，把你想实现弹出层效果的div加入一个class为hidden，如果没有图片，就写一个span来遮罩整个div，然后给需要弹出的层的div加入一个class为children，里面的内容可以自己发挥，注意这个层需要浮动，并且和上个div都设置position:absolute; 用z-index属性设置覆盖层在上。