JS 实现京东商城放大镜

简介: JS 实现京东商城放大镜

效果展示:

在左侧效果图区域按下鼠标会显示黄色覆盖层与右边的放大图,移动光标黄色覆盖层跟随移动并且可以改变右侧放大的范围 ,松开鼠标后黄色覆盖层与右侧放大区域隐藏实现原理:

     首先我们要获取到鼠标在左侧盒子内的坐标,以横坐标为例,x=光标到页面左侧距离-盒子到左侧距离,说白了就是 e.clientX - leftbox.offsetLeft,纵坐标同理。获取过后 x 与 y 得到的值减去黄色遮盖层一半的宽度 得到的分别为黄色遮盖层到左侧盒子的距离,maskX=mask.offsetWidth/2,到盒子上方竖直距离同理,然后赋值给盒子的绝对位移左上边距,这里用到了子绝父相来保证遮盖层的参照系是左侧盒子。为了防止遮盖层移动超出左侧盒子,用到了if语句判断X方向与Y方向,最难的部分在于小盒子与大盒子移动的比例,我们应该得到以下公式,右侧放大区域大图片:大图片移动的距离 = 遮盖层移动的距离 * 大图片最大移动距离 / 遮盖层最大移动距离,这样就可以得到大图片移动的距离了,但要注意此处要设置和小图片相反的移动方向,故在前面加符号即可。

JS区域代码:

<script>document.addEventListener('DOMContentLoaded',function(){
varsmallbox=document.querySelector('.smallbox');
varmask=document.querySelector('.mask');
varbigbox=document.querySelector('.bigbox');
smallbox.addEventListener('mousedown',function(e){
bigbox.style.display='block';
mask.style.display='block';
smallbox.addEventListener('mousemove',fn)
functionfn(e){
varX=e.clientX-smallbox.offsetLeft;    //光标在盒子内的坐标varY=e.clientY-smallbox.offsetTop;
maskX=X-mask.offsetWidth/2;         //遮盖层到盒子左和上的距离maskY=Y-mask.offsetHeight/2;
if(maskX<=0){                      //判断是否出界maskX=0;
           }elseif(maskX>=smallbox.offsetWidth-mask.offsetWidth){
maskX=smallbox.offsetWidth-mask.offsetWidth;
           }
if(maskY<=0){
maskY=0;
           }elseif(maskY>=smallbox.offsetHeight-mask.offsetHeight){
maskY=smallbox.offsetHeight-mask.offsetHeight;
           }
mask.style.left=maskX+'px';    //判断完是否出界后将距离赋值给遮盖层mask.style.top=maskY+'px';
varbigphoto=document.querySelector('.bigphoto');   //获取到右侧的大图片varbigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth;  //大图片最大的移动距离varbigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;
varmaskMaxX=smallbox.offsetWidth-mask.offsetWidth;    //遮盖层最大的移动距离varmaskMaxY=smallbox.offsetHeight-mask.offsetHeight;
varmaxMapX=maskX*bigMapMaxX/maskMaxX;    //大盒子移动的距离varmaxMapY=maskY*bigMapMaxY/maskMaxY;
bigphoto.style.left=-maxMapX+'px';
bigphoto.style.top=-maxMapY+'px';
        }
smallbox.addEventListener('mouseup',function(e){   //鼠标松开后删除mousemove事件smallbox.removeEventListener('mousemove',fn);
mask.style.display='none';
bigbox.style.display='none';
        })
      })
    })
</script>

完整代码:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>    .smallbox{
position: relative;
margin-top: 20px;
width: 400px;
height: 400px;
box-sizing: border-box;
cursor: move;
    }
    .mask{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background-color: rgba(255, 224, 88, 0.363);
    }
    .smallphoto{
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1pxsolid;
    }
    .bigbox{
position: absolute;
top: 28px;
left: 503px;
width: 500px;
height: 500px;
box-sizing: border-box;
border: 1pxsolid;
overflow: hidden;
display: none;
    }
    .bigphoto{
position: absolute;
top: 0px;
left: 0px;
    }
    .left{
float: left;
width: 80px;
height: 900px;
background-color: rgb(255, 255, 255);
    }
    .right{
margin-left: 10px;
float:left;
width: 1180px;
height: 900px;
background-color: rgb(255, 255, 255);
    }
</style></head><body><script>document.addEventListener('DOMContentLoaded',function(){
varsmallbox=document.querySelector('.smallbox');
varmask=document.querySelector('.mask');
varbigbox=document.querySelector('.bigbox');
smallbox.addEventListener('mousedown',function(e){
bigbox.style.display='block';
mask.style.display='block';
smallbox.addEventListener('mousemove',fn)
functionfn(e){
varX=e.clientX-smallbox.offsetLeft;
varY=e.clientY-smallbox.offsetTop;
maskX=X-mask.offsetWidth/2;
maskY=Y-mask.offsetHeight/2;
if(maskX<=0){
maskX=0;
           }elseif(maskX>=smallbox.offsetWidth-mask.offsetWidth){
maskX=smallbox.offsetWidth-mask.offsetWidth;
           }
if(maskY<=0){
maskY=0;
           }elseif(maskY>=smallbox.offsetHeight-mask.offsetHeight){
maskY=smallbox.offsetHeight-mask.offsetHeight;
           }
mask.style.left=maskX+'px';
mask.style.top=maskY+'px';
varbigphoto=document.querySelector('.bigphoto');
varbigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth;
varbigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;
varmaskMaxX=smallbox.offsetWidth-mask.offsetWidth;
varmaskMaxY=smallbox.offsetHeight-mask.offsetHeight;
varmaxMapX=maskX*bigMapMaxX/maskMaxX;
varmaxMapY=maskY*bigMapMaxY/maskMaxY;
bigphoto.style.left=-maxMapX+'px';
bigphoto.style.top=-maxMapY+'px';
        }
smallbox.addEventListener('mouseup',function(e){
smallbox.removeEventListener('mousemove',fn);
mask.style.display='none';
bigbox.style.display='none';
        })
      })
    })
</script><divclass="left"></div><divclass="right"><divclass="smallbox"><divclass="mask"></div><imgsrc="./iphone.jpg"alt=""class="smallphoto"></div><divclass="bigbox"><imgsrc="./iphone.jpg"alt=""class="bigphoto"></div></div></body></html>
相关文章
|
5月前
|
JavaScript
js类似放大镜(整理)
js类似放大镜(整理)
|
4月前
|
JavaScript 前端开发 算法
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
45 0
|
2月前
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的简单图像放大镜
使用 JavaScript 和 CSS 的简单图像放大镜
42 0
|
5月前
|
JavaScript 前端开发 开发者
|
5月前
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
161 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
205 0
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
131 0

相关产品

  • 云迁移中心