【javascript实现的图片查看器】仿lightbox

一直就认为javascript是个好东西，一直想好好学习。学习当然也得有成果，在将近隔了一个月后终于有东西可写了。

如今，我用javascript做了个图片查看器。

先看效果图：

先介绍下功能：

1.点击小图后可以显示大图，大图固定覆盖页面

2.可以显示本地图片，只需要选择图片获取到图片地址即可

3.动态添加图片，该图片也可以点击后显示大图

4.显示的大图附带有关闭按钮，点击大图或者关闭按钮皆可关闭大图

具体每个功能的实现：

（1）先设置一个固定的div层设置为隐藏，div层上有个图片标签，属性src为空值。在点击小图的事件上设置src属性为小图的地址且把div设置为可见即完成

（2）加上一个file标签，在Onclick方法里同时启动计时器，当选中一张本地图片后file标签里的文本框即会出现图片的地址，此时计时器会把地址复制给大图显示的div层，

同时把div层设置为可见。

（3）动态添加图片其实就是动态添加一个标签，同时设置好属性。但是在绑定事件的话就稍微复杂了。

根据浏览器不同会有不同的绑定方法：

 

if (Element.addEventListener) { // Mozilla, Netscape, Firefox
                Element.addEventListener('click',play, false);
            } else if (Element.attachEvent) { // IE
                Element.attachEvent("onclick", play);
            }

 其中play为方法名。

（4）为了能够有更好的用户体验，在大图旁边添加了个关闭按钮。其实就是在图片标签后面加了个按钮标签，为其绑定了个方法就行了。当然，我在图片的Onclick事件

也绑定了关闭的方法，为的就是用户体验。

使用的各种技术：

一。定时器的操作：

设置定时器： setInterval(getPic, 500);其中getPic为函数名，500就是每隔0.5秒运行一次

清除定时器：window.clearInterval(Interval);，清除定时器时传入的参数为定时器的编号：var Interval=   setInterval(getPic, 500);在此需要定义一个全局变量。

二。DOM技术：标签的操作。

获取标签：document.getElementById("fixPic")传入的参数为标签的ID

修改标签的属性： document.getElementById("fixPic").setAttribute("src", Url);

当然，此图片查看器还可以进行很多的扩展，有兴趣的读者可以自己根据需要来实现。难点就是如何实现，看你的脑瓜子是否灵活，是否能有很好的方法了。

在定时器这里，就有一些比较难控制的地方，比如说，你开启定时器后该在什么时候关闭呢？关闭了又改在什么时候开启呢？

要是有关于这些逻辑方面的问题的话，欢迎大家来跟我进行讨论，非常乐意。

 差点忘记了源码下载地址了：https://files.cnblogs.com/Zeech-Lee/javascript.rar