全个程干货用js 作图片的放大镜

开发工具与关键技术：DW /js
撰写时间：2019年2月10日

首先创建一个 html(学习CSDN的白小很白)

注意：这里的放大比例为：rightImg / leftImg；

然后添加元素属性，CSS代码为：

``

/* CSS Document */
body {
    height: 100vh;
    background-color: rgb(67, 62, 73);
}

.wrap {
    display: flex;
    justify-content: space-around;
    margin: 50px auto;
}

.left {
    border: 1px solid #30D4C7;
    position: relative;
    overflow: hidden;
}

#right {
    border: 1px solid #30D4C7;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

#mask {
	width: 100px;
	height: 100px;
    background: rgba(253, 191, 191, 0.459);
    position: absolute;
    left:0;
    top: 0;
    border-radius: 50%;
    display: none;
}

#right img {
    position: absolute;
    left: 0;
    top: 0;
}

最后 是,js代码：

因为document.getElementById(“right”).style.width 获取的元素属性有“单位”，所以用parseInt()转化为字符串；

最终，效果为下图：

这就是一个简单的图片的放大镜的全个程；