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

一直就认为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);

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

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

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

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

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/