JS技术

Javascript教程_大图查看器源码教程_Javascript教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-29 14:21 我要评论( )

图片查看器 使用方法:pictureBox.init(boxId,coverId,range,picwidth,picheight); boxId:图片查看器的主框体id,可据此设计框体样式。自设 coverId:覆盖层id,自设 rang:某个范围内的图片可以通过图片查看器查看高

图片查看器
使用方法:pictureBox.init(boxId,coverId,range,picwidth,picheight);
boxId:图片查看器的主框体id,可据此设计框体样式。自设
coverId:覆盖层id,自设
rang:某个范围内的图片可以通过图片查看器查看高像素图片,rang为节点对象
pictwidth:要显示图片的宽度。自设
picheight:要显示图片的高度,自设
!! 注意:方法的调用必须在文档底部,或window.onload中,但建议在文档底部调用,这样可避免在图片未加载完时图片查看器不看用

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评