做一个简单的抽屉广告
作者：黑马
一. 设想
主广告窗体隐藏起来，只有一个小按钮显现在浏览器body的左上方，当鼠标指针移到该按钮，主窗体自动拉出来，原来的按钮变为收缩按钮，单击它主窗体收回，按钮变回呼出按钮。
二. 实现思路
窗体：可以用一个1×2即一行二列的表格做成，作为广告之用，一般为200个像素的宽度即可。左边的单元格装载广告内容，是窗体主体部分，右边的单元格用于装载控制按钮，其宽度为按钮图片的宽度，垂直对齐方式为居上。
为了排版方面的美观起见，如上所示，左边单元格内将插入一个表格用以装载广告内容，右边窗体则出来控制方面，我们将在里面插入一个宽度和高度都为16个像素的表格。
定位：用CSS层叠样式实现——将table的位置(position）定义为绝对位置（absolute），左边（left）值为某个合适的负值即达到隐藏的目的，比如，-184px。
控制：用JS脚本达成——一方面，利用表格元素的onmousemove（鼠标指针经过）和onclick（鼠标键单击）事件分别调用预先编好的呼出和收回窗体，另一方面，在此二件事件中又分别插入更换图片的脚本代码。
三. 完成过程
步骤一：准备两个按钮图片，尺寸为16×16：
步骤二：
①表格代码——
<table id="drawer" width="200" border="0" cellpadding="0" cellspacing="0" style="position:absolute;left:-184px;top:8px;"><tr>
<td rowspan="2" width="184" valign="top">
<table border="1" width="100%" bgcolor="#ffffff" bordercolor="#ff4a4a" cellpadding="10" cellspacing="1"><tr><td>
<h3 align="center">抽屉广告</h3>
<p>单击右上角的红色按钮关闭抽屉</p>
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
</td></tr></table>
</td>
<td width="16" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="cursor:hand" onmousemove="ishow(drawer);dpic.src='close.gif';" onclick="ihide(drawer);dpic.src='open.gif';">
<img id="dpic" src="open.gif" bordedr="0">
</td></tr></table>
</td>
</tr></table>
上面代码中，外表格的id号不能缺少，它是抽屉呼出收回的标识；同理，<img>内的id号也不能丢掉，它是更换图片的标识；而装载图片的表格中，其<td>内的两上事件onmousemove和onclick分别调用呼出和收回函数并更换图片。
②JS代码——
<script language="javascript">
function ishow(obj){
for(i=-184;i<0;i++){
obj.style.left=i;
}
}
function ihide(obj){
for(i=0;i<184;i++){
obj.style.left=-i;
}
}
</script>
这两个自定义JS函数都使用了for语句，这样，拉出和收回广告抽屉的速度都很快。如果需要缓缓抽出窗体，可以考虑使用setTimeout函数加以控制。
效果示范 >> 抽屉式广告窗体应用实例
【 文章来源：本站原创[2008.2.6] 转载请注明作者及出处信息 】
网 |
更新日期：2008年02月7日 