关闭

Js淘宝放大镜实现

时间: 2019-01-21阅读: 1312标签: 图片

描述:

js面向对象——淘宝放大镜实现

图片的引用是一个大图,一个小图

传输用的ajax,记得改成自己的ip地址,jshtml都改一下


效果:



实现:

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>


来自:https://blog.csdn.net/qlwangcong518/article/details/86497930


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1854

使用html2canvas将页面转成图

之前在网上找到一个用 <a> 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。使用html2canvas将页面转成图,用canvas2image下载

CSS object-fit 对图片的处理

object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框,平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放

CSS如何将图像转换为模糊图像?

在CSS中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。blur():给图像设置高斯模糊,值越大越模糊。

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

网页图片不存在时不显示默认图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

JS实现图片放大镜功能

将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部分设置为隐藏。

html使用img标签和背景图片之间的区别

背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分,会在html结构加载的时候加载在网页加载的过程中,背景图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而img标签是网页结构(内容)的一部分会在html结构加载的过程中加载

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

图片加载失败后CSS样式处理最佳实践

如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的“裂开”的图片效果,如果设置了 alt 属性值,则 alt 属性对应的内容也会一并显示。例如

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!