1.首先在html内布局div和放入鼠标移入和移出事件,再在方法内写入获取缩放的位置方法
2.在style样式内配置样式
.box {
position: relative;
top: 60px;
margin: auto;
width: 380px;
height: 600px;
background: url("../../../assets/images/screen2/test1.png");
/*设置背景图尺寸大小*/
background-size: 380px 600px;
//滑块
.slider {
position: absolute;
width: 100px;
height: 100px;
background: #6ccdff;
/*设置透明度0~1,0是全透明。*/
opacity: 0.3;
}
//放大部位
.amplify {
position: absolute;
width: 100px;
height: 100px;
background: url("../../../assets/images/screen2/test1.png");
top: 100px;
right: -80px;
background-size: 380px 600px;
/*让元素放大,scale(3)指宽高同时放大3倍。*/
transform: scale(3);
}
}
3.看效果图