放大镜

放大镜大家都不陌生,这次我就用js写一个放大镜

css代码

  • {
    margin: 0;
    padding: 0;
    }

    .kk {
        display: flex;
    }
    
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid red;
        user-select: none;
    }
    
    .box .img img {
        width: 500px;
        height: 400px;
    }
    
    .box .box1 {
        width: 100px;
        height: 100px;
        background-color: rgb(255, 0, 0, 0.8);
        position: absolute;
        top: 0;
        left: 0;
        /* margin-top: -404px; */
    }
    
    .box2 {
        width: 500px;
        height: 400px;
        background: url(11.jpg) no-repeat;
        background-size: 500% 400%;
        border: 1px solid red;
        margin-left: 50px;
    }
    

html代码
放大镜

js代码
放大镜

效果图:放大镜

上一篇:div拖拽改变其宽度


下一篇:元素垂直居中的几种方法