本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论