程序员人生 网站导航

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

栏目:jscript时间:2014-01-17 22:37:04

  这是利用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()并未封装到图片查看器中,因为我认为这三个函数会在网页中多次应用,为避免重复代码,故没有封装。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐