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地图拖动功能SpryMap的简单实现
Jul 17 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JavaScript实现图片轮播特效
Oct 23 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 session 检测和注销
2009/03/16 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
python将字符串转换成数组的方法
2015/04/29 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Python实现对adb命令封装
2020/03/06 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
红旗团支部事迹材料
2014/01/27 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2015年测量员工作总结
2015/05/23 职场文书