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 相关文章推荐
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
老生常谈js中的MVC
Jul 25 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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 生成饼图 三维饼图
2009/09/28 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
两年的个人工作自我评价
2014/01/10 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
mysql中关键词exists的用法实例详解
2022/06/10 MySQL