老舟

接上篇，继续jQuery Tools的讲解。本篇讲解jQuery Tools中十分有用的一个组件——遮罩效果（overlay）。

遮罩效果的实现包含两个部分：触发遮罩效果的元素（触发器），及事件触发后，页面上方弹出的遮罩层元素。

下面看一个最简单的例子（点击关闭按钮或触发按钮或esc键，关闭overlay）：

点击我，看效果  样式2  样式3  样式4

HTML Code:

<!– 定义一个按钮作为触发器. 这里通过rel属性，指定遮罩层元素的id –>
<button type=”button” rel=”#overlay”>Open overlay</button>

<!– 遮罩元素，你可以通过样式表定义样式 –>
<!– 遮罩元素可以使任何html元素，一般我们用div，注意id的设定 –>
<div id=”overlay”>
<!–这里是遮罩层里面要放的东西 –>
<h2 style=”margin:10px 0″>Here is my overlay</h2>
<p style=”float: left; margin:0px 20px 0 0;”>
<img src=”http://static.flowplayer.org/img/title/eye192.png” />
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
Javascript Code：

$(function() {
//为页面中所有拥有rel属性的button元素绑定overlay效果
$(“button[rel]“).overlay();
});
CSS是可以由你自由定义的，上面示例的效果用的是官方提供的，如下供参考：

/* overlay元素*/
div.overlay {

/* overlay背景图 */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);

/* overlay的最终尺寸，可以由此改变overlay大小  */
width:600px;
height:470px;

/* overlay默认隐藏 */
display:none;

/* 设定内嵌元素padding，获得好的视觉效果  */
padding:55px;
}

/* 关闭按钮样式， 放置在右上角 */
div.overlay div.close {
background-image:url(http://flowplayer.org/tools/img/overlay/close.png);
position:absolute;
right:5px;
top:5px;
cursor:pointer;
height:35px;
width:35px;
}
上面的示例均使用了默认配置，实际上overlay组件有许多参数可配置，所有参数可以参考这里，在下面这个例子中，配置了一些参数：

点击我，看效果

Javascript Code：

$(function() {
$(“button.overlaybutton”).overlay({
// 设置参数
expose: {    //启用expose效果
color: ‘#BAD0DB’,       //expose颜色
opacity: 0.7,            //expose透明度
closeSpeed: 1000     //expose关闭速度
},
finish: {top: ‘center’}    //设置消失方向
});
});