描述:
javaScript面向对象——淘宝放大镜实现
图片的引用是一个大图,一个小图。
传输用的ajax,记得改成自己的ip地址,js和html都改一下。
最终效果如下:
实现过程:
js文件:LoadMethod.js
class LoadMethod{ static get LOAD_IMG_FINISH(){ return “load_img_finish”; } static init(sourceList){ let img=new Image(); img.num=0; img.sourceList=sourceList; img.targetList={}; img.addEventListener(“load”,LoadMethod.loadHandler); img.src=sourceList[0]; } static loadHandler(e){ let images=this.cloneNode(false); let name=this.sourceList[this.num]; name=name.slice(name.lastIndexOf(“/”)+1,name.lastIndexOf(“.”)); this.targetList[name]={src:images.src,elem:images,width:images.width,height:images.height}; this.num++; if(this.num>this.sourceList.length-1){ this.removeEventListener(“load”,LoadMethod.loadHandler); let evt=new Event(LoadMethod.LOAD_IMG_FINISH); evt.targetList=this.targetList; document.dispatchEvent(evt); return; } this.src=this.sourceList[this.num]; }}class Drag{ static dragElem(elem,rect,parent){ Drag.drageHandler=Drag.mouseHandler.bind(elem); elem.rect=rect; elem.parent=parent; elem.addEventListener(“mousedown”,Drag.drageHandler); } static removeDrag(elem){ elem.removeEventListener(“mousedown”,Drag.drageHandler); Drag.drageHandler=null; } static mouseHandler