JavaScript图片显示

<divid="DDoverlay"></div>
<divid="DDimgBox">
　　<divclass="imgFrame"><imgsrc=""alt=""/></div>
　　<divclass="imgNote"></div>
</div>

CSS

样式表简单设计如下：

Code

#DDoverlay{
　　display:none;
　　position:fixed;top:0px;left:0px;
　　height:100%;width:100%;
　　background-color:#000;z-index:1000;
　　filter:alpha(opacity=60);opacity:0.6;
}
#DDimgBox{
　　display:none;
　　position:absolute;
　　border:3pxsolid#000;
　　background-color:#EEE;
　　padding:8px;z-index:1100;
　　overflow:hidden;
　　/*以下样式实际应用时应省略，这里为演示用*/
　　width:602px;
}
#DDimgBox.imgFrame{
　　display:block;
　　border:1pxsolid#333;
　　background-color:#DDD;
　　/*以下样式实际应用时应省略，这里为演示用*/
　　width:600px;
}
#DDimgBox.imgNote{
　　display:block;padding:8px;
　　text-align:center;color:#333;
　　font-size:12px;height:auto;
}

使用IE6.0的朋友请注意，这里演示效果的js代码没有考虑IE6.0的兼容性，IE6.0中覆盖层将滑到页面最底部，关闭图片框请到页面底部点击灰色覆盖层。

有时间我再改好，不好意思……

第二步：准备工具

根据第一步设计的页面标记与图片效果，我们需要准备一些工具，实现以下功能：