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

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

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

先看效果图:【javascript实现的图片查看器】仿lightbox_第1张图片

先介绍下功能:

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);

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

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

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

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

你可能感兴趣的:(JavaScript)