不到100行js代码实现网页放大镜

最新推荐文章于 2024-07-18 18:43:34 发布

KatyLight

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量99

点赞数

分类专栏：插件

本文链接：https://blog.csdn.net/qq_33014695/article/details/119960883

版权

JavaScript 图片裁剪 canvas DOM操作事件监听

关键词由CSDN通过智能技术生成

插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Cut.js文件

class Cut {

    constructor(boxId,cubeId,cvId,myName) {

        this.box=document.getElementById(boxId);
        this.cube=document.getElementById(cubeId);
        this.cv=document.getElementById(cvId);
        this.cvCx=this.cv.getContext('2d');
        this.myName=myName;
        this.box.setAttribute("myName",this.myName);
        this.lx=this.box.querySelector("img").offsetLeft;
        this.ly=this.box.querySelector("img").offsetTop;
        this.xx=this.box.offsetLeft;
        this.yy=this.box.offsetTop;
        this.cubeCut={
            x:0,
            y:0,
            width:0,
            height:0
        };
        this.isUse=false;
        this.img={
            img:new Image(),
            width:0,
            height:0,
            cWidth:0,
            cHeight:0
        }
        this.proportion=0;
        this.img.img.src=this.box.querySelector("img").src;
        let o=this;
        this.img.img.onload=function(){
            o.cvCx.drawImage(o.img.img, 0,0,100,100,0,0,400,400);
            o.img.height=o.img.img.height;
            o.img.width=o.img.img.width;
            o.img.cHeight=o.box.querySelector("img").height;
            o.img.cWidth=o.box.querySelector("img").width;
            o.proportion=o.img.img.width/o.box.querySelector("img").width;
        }
        this.p={x:0,y:0};
        this.box.ac=this;
        this.box.addEventListener("mouseenter",function (e){
            this.ac.inner(e);
        })
        this.box.addEventListener("mouseleave",function (e){
            this.ac.leave();
        })
        this.box.addEventListener("mousemove",function (e){
            this.ac.move(e);
        })
    }
    myDraw(e){
        this.p.x=e.clientX-this.xx-50;
        this.p.y=e.clientY-this.yy-50;
        this.cube.style.left = (this.p.x)  + 'px';
        this.cube.style.top = (this.p.y) + 'px';
        this.cvCx.clearRect(0,0,400,400);
        this.p.x-=this.lx;
        this.p.y-=this.ly;
        this.cubeCut.x=this.proportion*this.p.x;
        this.cubeCut.y=this.proportion*this.p.y;
        this.cubeCut.width=this.proportion*100;
        this.cubeCut.height=this.proportion*100;
        this.cvCx.drawImage(this.img.img,
            this.cubeCut.x,this.cubeCut.y,
            this.cubeCut.width,this.cubeCut.width,0,0,400,400);

    }
    leave(){
        this.isUse=false;
        this.cube.classList.remove("active");
        this.cv.style.display="none";
    }
    move(e){
        if(this.isUse===false){
            return;
        }
        this.myDraw(e);
    }
    inner(e){
        if(this.isUse===true)
        {
            return;
        }
        this.cube.classList.add("active");
        this.isUse=true;
        this.cv.style.display="block";
        this.myDraw(e);
    }

}

Cut.css文件

.box{
    background-image: url("../img/pixel.png");
    height: 400px;
    width: 400px;
    padding: 0;
    border: 1px solid black;
    line-height: 400px;
    overflow: hidden;
    position: relative;
    float: left;
    vertical-align: middle;
    text-align: center;

}

.box>img{line-height: 400px; vertical-align: middle;
      max-height: 100%;
    max-width: 100%;

 }
.cube{
    background-image: url("../img/web.png");
    height: 100px;
    width: 100px;
    position: absolute;
    display: none;
    left: 0;
    top: 0;

}
.cube.active{
    display: block;
}
body{
    padding: 0;
    margin: 0;
}

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/CutPic.css" rel="stylesheet"/>
    <script src="js/CutPic.js"></script>
<script>

    let c;
    window.onload=function (){
        c=new Cut("bigBox","cc","cv","c");

    }




</script>
</head>
<body>
<div class="header" style="height: 400px;background-color: lightseagreen">

</div>
<div class="box" id="bigBox" style="margin-left: 200px">
    <img src="img/katy4.jpg" alt="图片">
    <div class="cube" id="cc"></div>
</div>
<canvas id="cv" class="cv" width="400px" height="400px" style=" border:1px solid black;display: none"> </canvas>
<span id="info"></span>
<br/>
<span id="info2"></span>
</body>
</html>

KatyLight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不到100行js代码实现网页放大镜

Cut.js文件class Cut { constructor(boxId,cubeId,cvId,myName) { this.box=document.getElementById(boxId); this.cube=document.getElementById(cubeId); this.cv=document.getElementById(cvId); this.cvCx=this.cv.getContext('2d
复制链接

扫一扫