js如何实现淘宝放大镜
作者
小编给大家分享一下js如何实现淘宝放大镜,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
本文实例为大家分享了js实现淘宝放大镜的具体代码,供大家参考,具体内容如下
描述:
JS面向对象——淘宝放大镜实现
图片的引用是一个大图,一个小图
传输用的ajax,记得改成自己的ip地址,js和html都改一下
效果:
实现:
js文件:
LoadMethod.js
classLoadMethod{ staticgetLOAD_IMG_FINISH(){ return"load_img_finish"; } staticinit(sourceList){ letimg=newImage(); img.num=0; img.sourceList=sourceList; img.targetList={}; img.addEventListener("load",LoadMethod.loadHandler); img.src=sourceList[0]; } staticloadHandler(e){ letimages=this.cloneNode(false); letname=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); letevt=newEvent(LoadMethod.LOAD_IMG_FINISH); evt.targetList=this.targetList; document.dispatchEvent(evt); return; } this.src=this.sourceList[this.num]; } } classDrag{ staticdragElem(elem,rect,parent){ Drag.drageHandler=Drag.mouseHandler.bind(elem); elem.rect=rect; elem.parent=parent; elem.addEventListener("mousedown",Drag.drageHandler); } staticremoveDrag(elem){ elem.removeEventListener("mousedown",Drag.drageHandler); Drag.drageHandler=null; } staticmouseHandler(e){ if(e.type==="mousedown"){ this.addEventListener("mouseup",Drag.drageHandler); this.offsetPoint={x:e.offsetX,y:e.offsetY}; document.addEventListener("mousemove",Drag.drageHandler); }elseif(e.type==="mousemove"){ if(!this.rect){ this.rect=this.parent.getBoundingClientRect(); } letobj={ 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); letelemRect=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"; } letevt=newEvent(Drag.ELEM_MOVE_EVENT); evt.point={x:this.offsetLeft,y:this.offsetTop}; this.dispatchEvent(evt); }elseif(e.type==="mouseup"){ this.removeEventListener("mouseup",Drag.drageHandler); document.removeEventListener("mousemove",Drag.drageHandler); } } staticgetELEM_MOVE_EVENT(){ return"elem_move_event"; } }
ZoomClasses.js
classZoomClasses{ 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)returnthis.zoomView; letdiv=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"; returndiv; } setwidth(value){ this._width=value; this.render(); } getwidth(){ if(!this._width)this._width=0; returnthis._width; } setheight(value){ this._height=value; this.render(); } getheight(){ if(!this._height)this._height=0; returnthis._height; } setimgSource(value){ if(!Array.isArray(value))return; this._imgSource=value; LoadMethod.init(value); } setleft(value){ this.zoomView.style.left=value+"px"; } settop(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; letwidthScale=this.targetList["min"].width/this.targetList["max"].width; letheightScale=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:"1pxsolid#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" }); letwidthScale=this.targetList["min"].width/this.targetList["max"].width; letheightScale=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:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <scriptsrc="js/LoadMethod.js"></script> <scriptsrc="js/ZoomClasses.js"></script> </head> <body> <script> letzoom=newZoomClasses(document.body); zoom.imgSource=["img/max.jpg","img/min.jpg"]; </script> </body> </html>
以上是“js如何实现淘宝放大镜”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注恰卡编程网行业资讯频道!
目录
推荐阅读
-
JavaScript闭包用多会造成内存泄露吗
-
javascript中文乱码如何解决
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...
-
前端开发工程师专业技能简历范文
-
JavaScript怎么实现淘宝网图片的局部放大功能
0 条评论
本站已关闭游客评论,请登录或者注册后再评论吧~