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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
Python多线程学习资料
2012/12/19 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python实现全排列的打印
2018/08/18 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
自我评价个人范文
2013/12/16 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB