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


Posted in Javascript onJanuary 15, 2020

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

描述:

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

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

传输用的ajax,记得改成自己的ip地址,js和html都改一下

效果:

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

实现:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
js实现简单的打印表格
Jan 15 #Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
基于vue.js实现购物车
Jan 15 #Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 #Javascript
You might like
php eval函数用法总结
2012/10/31 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
摘自启点的main.js
2008/04/20 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python with语句的原理与用法详解
2020/03/30 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Django多个app urls配置代码实例
2020/11/26 Python
html5的localstorage详解
2017/05/09 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
实习护理工作自我评价
2013/09/25 职场文书
高中生的自我评价
2014/03/04 职场文书
作文批改评语大全
2014/04/23 职场文书
关于建议书的格式范文
2014/05/20 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
企业务虚会发言材料
2014/10/20 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python