img zoom!图片放大镜,在鼠标滑过图片时,在鼠标

##下载地址 git clone git@github.com:censhi007/imgBrowser or

git clone git://github.com/censhi007/imgBrowser #imgBrowser[图片放大镜]

##功能描述 当鼠标过图片(img元素)时,在鼠标附近显示原始大小的图片。如果图片超过了窗口大小,那么等比例缩放。 ##依赖 依赖于jQuery,用于元素创建、定位查找以及事件绑定。若能有其他实现此功能的插件,亦可。 ##调用接口

ImgBrowser.attach(container,useCache,cache); 参数解释: container:string/DOM 用于jQuery定位元素。加载后,将查找该元素下所有的img元素,并进行初始化。 useCache:boolean 是否使用页面缓存。请注意,仅仅在只有浏览器支持canvas时才使用缓存。 cache:自定义的缓存工厂对象。用户可以自己定义页面缓存工厂。但是需要实现set(k,v)与get(k)方法。

##示例

$(document).ready(function(){ImgBrowser.attach("body");});

或者

$(document).ready(function(){ImgBrowser.attach("body",true);});

或者

$(document).ready(function(){ImgBrowser.attach("body",true,{set:function(p){},get:function(p){}});});

使用延时加载需要在img元素中使用url/href/_data_image_中的任意一个设置图片地址。如:

<img src="blank.png" url="/xx/20141118/uid-104512-qh123456.png"/> 其中blank.png是在url指定的图片没有加载完成时显示的图像。 #indexDB[使用IndexDB的缓存工具]

##功能描述 在有IndexDB数据库的浏览器上提供放IndexDB数据的接口。使得用户可以通过简单的set.get访问indexDB。 ##函数介绍

var idb = $ib(dName,version,tables) 函数解释: $ib:获取indexdb工具对象的函数。 dName:数据库名 version:数据库版本号 tables:数据库中的表。格式为:[{name:tName,key:kName}].其中tName是表名,kName是主键名 返回indexDB工具 idb.set(param) 函数解释: 用于向indexDB中存储数据。 param.success()为成功时的回调函数,可选。 param.error()为失败时的回调函数,可选。 param.tableName为数据所对应的表,没有时取默认值 idb.get(param) 函数解释: 用于从数据库中获取数据。 param.success()为成功时的回调函数,可选。 param.error()为失败时的回调函数,可选。 param.tableName为数据所对应的表,没有时取默认值 param中的其他非function类型的属性,将用来进行数据过滤。 ##imgBrowser+indexDB联合示例 var dName = "image_browser"; var path = "table_image_path"; var idb = $ib(dName,3.0,[{name:path,key:"url"}]); //因为ImgBrowser中不会指定indexDB的数据表,所以需要在调用前指定默认表 idb.setDefaultTableName(path); $(document).ready(function(){ //此处使用了延时,因为indexDB是异步的,调用时可能没有初始化完成。 setTimeout(function(){ ImgBrowser.attach("body",true,idb.IndexedDBSupported?idb:null);// },500); }); #imgShow[图片旋转工具]

##功能描述 当鼠标点击图片(img元素)时,将生成一个遮罩层,在该层中显示图片的原始内容。然后在该层内可以对图片进行旋转。旋转触发可以是按钮也可以是拖拽! ##依赖 依赖于jQuery,用于元素创建、定位查找以及事件绑定。若能有其他实现此功能的插件,亦可。 ##调用接口

$is(o);

或这

imageShow(o); 参数解释: o:string/Object 如果是string用于jQuery定位元素。如果是object,请传入{el:...},其中el指定dom元素。mode指定旋转引擎(字符串)。oper指定img的触发事件。

##其他功能 当前js中默认带有三个引擎filters/css3/canvas。你也可以自己实现其他的引擎,同样你也可以去掉自带的引擎。引擎使用继承方法实现。下面是对canvas引擎的解释。请注意引擎按实现顺序自动调用可用的引擎,因此如果需要指定引擎请在调用接口时传入参数,

var win = window;//本地使用的window对象命名 //ImageRotateEngin是引擎父级类。通过对象的形式实现继承接口为ImageRotateEngin().extend(name,prop) ImageRotateEngin().extend("_$_canvas_$_"+Math.random(),{ engin:"canvas",/**引擎名*/ supportInBrowser:function(){/**当前浏览器是否支持本引擎*/ return "getContext" in document.createElement("canvas"); }(),initElement:function(o){ /**本方法用于初始化待旋转的图片元素*/ o=o||{};/**本参数是对象,包含suc回调,err回调,el图片对象等属性。*/ var suc = this.getSucCallBack(o);/**获取成功回调函数,如果没有生成默认的回调函数,并产生别名*/ var that = this;/**this对象的别名*/ o['suc']=function(){ /**改变o对象的成功回调函数*/ var el = that.getElement(o);/**获取初始化的图片元素。也就是待旋转的图片*/ if("get" in el)el = el.get(0);/**元素可以是jq对象*/ /**生成一个显示图片的画布*/ var canvas = that._canvas = document.createElement('canvas'), context = that._context = canvas.getContext('2d');/**提取绘画工具*/ var opst = that._css_(el,"display");/**获取初始化前,待处理元素的display样式*/ el.setAttribute("_r_i_s_display_",opst);/**存储该样式*/ /**给canvas和el对象添加指定样式*/ that._css_(canvas,{ position:"absolute", left:"0px", top:"0px" })._css_(el,{ display:"none" }); var p = el.parentElement||el.parentNode; /**将canvas插入el之前*/ p.insertBefore(canvas,el); /**运行本initElement函数传入的suc回调函数*/ return suc.apply(this,arguments); } /**调用父级的initElement方法进行初始化*/ this.Super("initElement",arguments);//因为返回的是父级对象 return this; },desElement:function(o){ /**本方法用于撤销旋转的支持。*/ o=o||{};/**本参数是对象,包含suc回调,err回调,el图片对象等属性。*/ var suc = this.getSucCallBack(o);/**获取成功回调函数,如果没有生成默认的回调函数,并产生别名*/ var that = this;/**this对象的别名*/ o['suc']=function(){ /**改变o对象的成功回调函数*/ var el = that.getElement(o); if("get" in el)el = el.get(0); var p = el.parentElement||el.parentNode; /**删除canvas*/ p.removeChild(that._canvas); delete that._canvas; delete that._context; var opst = el.getAttribute("_r_i_s_display_"); el.removeAttribute("_r_i_s_display_"); /**将el对象恢复到初始化之前的状态*/ that._css_(el,{ display:opst }); /**调用传入desElement的成功回调函数*/ return suc.apply(this,arguments); } /**调用上级的方法进行撤销处理*/ this.Super("desElement",arguments); return this; },show:function(o,map){ /**本方法是主要的渲染方法,必须实现!*/ if(!o)return this; o=o||{}; var suc = this.getSucCallBack(o); var that = this; o['suc']=function(){ var cvs = that._canvas; var ctx = that._context; var el = that.getElement(o); if("get" in el)el = el.get(0); /**以下是canvas实现旋转的方法*/ var p = el.parentElement||el.parentNode; var pwidth = p.clientWidth; var ph = p.clientHeight; cvs.width = pwidth; cvs.height = ph; ctx.save(); ctx.clearRect( 0, 0, pwidth, ph );//清空内容 ctx.translate( pwidth / 2 , ph / 2 );//中心坐标 ctx.rotate( map.rda );//旋转 ctx.scale( map.y, map.x);//缩放 ctx.drawImage( el, -el.width / 2, -el.height / 2 );//居中画图 ctx.restore(); /**调用成功后的回调函数*/ return suc.apply(that,arguments); } /**使用上级的show方法进行处理*/ this.Super("show",arguments); return this; } });

自定义引擎必须实现show以及supportInBrowser方法,如果引擎需要额外的参数支持,请实现initElement和desElement方法。

#editor[文本编辑器]

##功能描述 当鼠标过图片(img元素)时,在鼠标附近显示原始大小的图片。如果图片超过了窗口大小,那么等比例缩放。 ##依赖 依赖于jQuery,用于元素创建、定位查找以及事件绑定。若能有其他实现此功能的插件,亦可。 ##调用接口 $editor(selector); 参数解释: selector:dom定位属性,用于jQuery定位。编辑器将在该dom位置并以该dom大小渲染。 ##示例 $editor("#container");

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。