js面向对象之实现淘宝放大镜

本文实例为大家分享了js实现淘宝放大镜的具体代码，供大家参考，具体内容如下

描述：

js面向对象——淘宝放大镜实现

图片的引用是一个大图，一个小图

传输用的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(e){
    if(e.type==="mousedown"){
      this.addeventlistener("mouseup",drag.dragehandler);
      this.offsetpoint={x:e.offsetx,y:e.offsety};
      document.addeventlistener("mousemove",drag.dragehandler);
    }else if(e.type==="mousemove"){
      if(!this.rect){
        this.rect=this.parent.getboundingclientrect();
      }
      let obj={
        left:e.x-this.offsetpoint.x-this.rect.left+"px",
        top:e.y-this.offsetpoint.y-this.rect.top+"px",
        position:"absolute"
      };
      object.assign(this.style,obj);
      let elemrect=this.getboundingclientrect();
      if(elemrect.left<this.rect.left){
        this.style.left="0px";
      }
      if(elemrect.right>this.rect.right){
        this.style.left=this.rect.right-elemrect.width-this.rect.left+"px";
      }
      if(elemrect.top<this.rect.top){
        this.style.top="0px";
      }
      if(elemrect.bottom>this.rect.bottom){
        this.style.top=this.rect.bottom-elemrect.height-this.rect.top+"px";
      }
      let evt=new event(drag.elem_move_event);
      evt.point={x:this.offsetleft,y:this.offsettop};
      this.dispatchevent(evt);
    }else if(e.type==="mouseup"){
      this.removeeventlistener("mouseup",drag.dragehandler);
      document.removeeventlistener("mousemove",drag.dragehandler);
    }
  }
  static get elem_move_event(){
    return "elem_move_event";
  }
}

zoomclasses.js

class zoomclasses{
  constructor(panrent){
    this.bindhandler=this.loadfinishhandler.bind(this);
    document.addeventlistener(loadmethod.load_img_finish,this.bindhandler);
    this.zoomview=this.createview();
    panrent.appendchild(this.zoomview);
  }
  createview(){
    if(this.zoomview) return this.zoomview;
    let div=document.createelement("div");
    this.mindiv=document.createelement("div");
    this.maxdiv=document.createelement("div");
    this.dragdiv=document.createelement("div");
    object.assign(div.style,{
      position:"relative",
    });
    this.mindiv.appendchild(this.dragdiv);
    div.appendchild(this.mindiv);
    div.appendchild(this.maxdiv);
    this.dragdiv.addeventlistener(drag.elem_move_event,this.movehandler.bind(this));
    drag.dragelem(this.dragdiv,null,this.mindiv);
    this.mindiv.style.float=this.maxdiv.style.float="left";
    return div;
  }
  set width(value){
    this._width=value;
    this.render();
  }
  get width(){
    if(!this._width) this._width=0;
    return this._width;
  }
  set height(value){
    this._height=value;
    this.render();
  }
  get height(){
    if(!this._height) this._height=0;
    return this._height;
  }
  set imgsource(value){
    if(!array.isarray(value))return;
    this._imgsource=value;
    loadmethod.init(value);
  }
  set left(value){
    this.zoomview.style.left=value+"px";
  }
  set top(value){
    this.zoomview.style.top=value+"px";
  }
  loadfinishhandler(e){
    this.targetlist=e.targetlist;
    this.width=this.width || e.targetlist["min"].width;
    this.height=this.height || e.targetlist["min"].height;
 
  }
  movehandler(e){
    if(!this.targetlist || this.targetlist.length<2) return;
    let widthscale=this.targetlist["min"].width/this.targetlist["max"].width;
    let heightscale=this.targetlist["min"].height/this.targetlist["max"].height;
    object.assign(this.maxdiv.style,{
      backgroundpositionx:-e.point.x/widthscale+"px",
      backgroundpositiony:-e.point.y/widthscale+"px",
    });
  }
  render(){
    if(!this.targetlist || this.targetlist.length<2) return;
    object.assign(this.mindiv.style,{
      width:this.width+"px",
      height:this.height+"px",
 
      border:"1px solid #000000",
 
      backgroundimage:`url(${this.targetlist["min"].src})`,
      position:"relative"
    });
    object.assign(this.maxdiv.style,{
      width:this.width+"px",
      height:this.height+"px",
      backgroundimage:`url(${this.targetlist["max"].src})`,
      position:"relative"
    });
    let widthscale=this.targetlist["min"].width/this.targetlist["max"].width;
    let heightscale=this.targetlist["min"].height/this.targetlist["max"].height;
    object.assign(this.dragdiv.style,{
      width:this.width*widthscale+"px",
      height:this.height*heightscale+"px",
      backgroundcolor:"rgba(255,0,0,0.2)",
      position:"absolute"
    })
 
  }
}

html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <script src="js/loadmethod.js"></script>
  <script src="js/zoomclasses.js"></script>
</head>
<body>
  <script>
    let zoom=new zoomclasses(document.body);
    zoom.imgsource=["img/max.jpg","img/min.jpg"];
 
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。