JavaScript图片显示

核心提示：时常看到一种js效果，点击网页上一个图片，JavaScript图片显示，背景变灰，前景出现一个图片框，下部是图片注释 - > 鼠标点击覆盖层- > 图片框与覆盖层同时渐隐消失页面元素根据上面的需求设计页面元素如下，这个比较简单，框里显示被点击图片的大图，著名的实现有lightbox和thickbox

时常看到一种js效果，点击网页上一个图片，背景变灰，前景出现一个图片框，框里显示被点击图片的大图。著名的实现有lightbox和thickbox。

以前看到这种效果觉得很酷，现在自己也来简单实现一个（就叫DDbox哈哈）。

第一步：设计页面标记

首先要考虑的是在页面文档中要怎么标记这样一个位置：当你点击该位置的时候会出现上文所述效果。

考虑到当JavaScript被禁用时，仍能确保一定的用户体验，我们使用带有href属性的a标签。当JavaScript被允许的时候，点击该标签可以展示我们的动画，并且阻止跳转。当JavaScript被禁用的时候，我们通过<a>标签的链接地址转到图片所在位置。

这里我们会考虑到图片可能需要一些注释。注释的获取考虑借用属性rel（之前考虑过用自定义的属性字段，但是发现除了IE之外其他浏览器都读不出这些自定义的属性字段），我们把注释相关语句的字符串在页面中写入到rel属性中去。

是了，不要忘了，我们还要标记怎样的一个<a>标签才是我们要实现效果的一个位置，加上class属性 class="DDbox"。

图片效果

接下来设计一下这样的<a>标签被点击时，想要达到的效果。

设计大致流程如下：点击class为DDbox的<a>标签

- > 出现灰色覆盖层

- > 图片框在页面中间位置以适宜的大小纵向展开，接着图片渐现（这里暂不考虑图片载入时未能显示的问题）

- > 图片框最终展开，图片框上部是图片，下部是图片注释

- > 鼠标点击覆盖层

- > 图片框与覆盖层同时渐隐消失

页面元素

根据上面的需求设计页面元素如下，这个比较简单，就不多说了。

Code