图片放大，发大镜效果

标签：tor   size   cti   isp   page   style   select   document   UNC   

//             html部分

<div class="fdj">
　　<div class="left">
　　　　<div class="zhezhao"></div>
　　</div>
　　<div class="right"></div>
</div>

//         css部分

.fdj{
　　width:100vw;
　　height: 100vh;
　　margin: 0 auto;
　　display: flex;
　　}
.left{
　　width: 540px;
　　height: 810px;
　　background-image: url(1.jpg);
　　background-size: 100% 100%;
　　position: relative;
}
.zhezhao{
　　display: none;
　　width: 270px;
　　height: 300px;
　　background: rgba(255,255,0,0.7);
　　position: absolute;
}
.right {
　　width: 540px;
　　height: 540px;
　　display: none;
　　background-image: url(1.jpg);
　　background-size: 1080px 1620px;
　　background-position: 0 0;
}

//          js部分

　　var fdj = document.querySelector(‘.fdj‘)
　　var left = document.querySelector(‘.left‘);
　　var right = document.querySelector(‘.right‘);
　　var zhezhao = document.querySelector(‘.zhezhao‘)
　　left.onmouseenter = function(){
　　zhezhao.style.display = ‘block‘
　　right.style.display = ‘block‘
　　}
　　left.onmouseleave = function(){
　　zhezhao.style.display = ‘none‘
　　right.style.display = ‘none‘
　　}
　　left.onmousemove = function(e){
　　//console.log(e);
　　var getX = e.pageX - 135 - fdj.offsetLeft;
　　var getY = e.pageY -150 -fdj.offsetTop;
　　if(getX<0){
　　getX = 0
　　}
　　if(getX>270){
　　getX = 270
　　}
　　if(getY < 0 ){
　　getY = 0
　　}
　　if(getY > 500){
　　getY= 500
　　}
　　zhezhao.style.left = getX+‘px‘;
　　zhezhao.style.top = getY+ ‘px‘
　　right.style.backgroundPosition = (-getX*2)+"px " +(-getY*2)+‘px‘
　　}

图片放大，发大镜效果

标签：tor   size   cti   isp   page   style   select   document   UNC   

原文地址：https://www.cnblogs.com/alannero/p/14806679.html