js图片查看器,层方式显示上一张下一张带退出

　　这是利用javascript实现图片查看器,层方式显示上一张下一张带退出的代码，注意代码里的函数$(),addEvent(),removeEvent()并未封装到图片查看器中，个人认为这三个函数会在网页中多次应用，为避免重复代码，故没有封装。示例中使用了淡入淡出效果(仅FF，IE中测试时太耗资源，故放弃)，和滑动效果，还有拖动。其中拖动柄在右侧，初始为透明，当鼠标放在图片上时会滑出图片信息。

　　使用方法：pictureBox.init(boxId,coverId,range,picwidth,picheight);

　　boxId:图片查看器的主框体id，可据此设计框体样式。自设

　　coverId:覆盖层id，自设

　　rang:某个范围内的图片可以通过图片查看器查看高像素图片，rang为节点对象

　　pictwidth:要显示图片的宽度。自设

　　picheight:要显示图片的高度，自设

　　!! 注意：方法的调用必须在文档底部，或window.onload中，但建议在文档底部调用，这样可避免在图片未加载完时图片查看器不看用

　　实例：

　　本文演示：http://www.wfuyu.com/a/demo/2010/js_pic_box.html

　　写的图片查看器（无上一张下一张效果）：http://www.wfuyu.com/a/view/17659.html

　　所有方法说明：

　　1. init():初始化图片查看器，包括创建节点，和添加事件

　　2. createBox():创建图片查看器所需所有节点

　　3.addEvents():为节点添加所需所有事件

　　4. drag(elem):使可拖动 node elem: 拖动柄

　　6. fadeout(elem,start,end,speed):淡出 documentElement elem:淡出元素,int start 起始透明度，int end 结束透明度，帧 speed：速度，

　　6. fadein(elem,start,end,speed):淡出 documentElement elem:淡出元素,int start 起始透明度，int end 结束透明度，帧 speed：速度，

　　7.follow(source,follower,handlerBeforeFl): documentElement source:跟随域,documentElement follower:跟随元素，function handlerBeforeFl :跟随效果前执行，可为空

　　8.viewPic(container,src,handler): documentElement container:图片的容器，src：图片源地址，handler:修改源地址的函数，可为空

　　9.hide():隐藏图片查看器

　　10.start():显示图片查看器

　　11._imgHandler(src):修改src，与viewPic中handler相对应，根据具体情况可以自定义此函数

　　12._handlerBeforeFl():与follow中handlerBeforeFl相对应;功能是获取img标签中的title信息，分号作为换行，也可以根据具体情况自定义此函数。

　　13._coverWidth():返回覆盖层宽

　　14._coverHeight():返回覆盖层高

　　注意：函数$(),addEvent(),removeEvent()并未封装到图片查看器中，因为我认为这三个函数会在网页中多次应用，为避免重复代码，故没有封装。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠