js要如何实现仿京东放大镜的效果

  介绍

小编给大家分享一下js要如何实现仿京东放大镜的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

1,效果1:鼠标经过前

 js要如何实现仿京东放大镜的效果

2,效果2:鼠标放上去,弹出右边放大镜

 js要如何实现仿京东放大镜的效果

3,效果3:鼠标在小盒子移动,放大镜跟着移动

 js要如何实现仿京东放大镜的效果

4,源代码如下:

& lt; !DOCTYPE html>   & lt; html lang=癳n"祝辞   & lt; head>   & lt;元charset=癠TF-8"祝辞   & lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;   & lt; title> Document   & lt; style>/*清除默认样式*/* {   保证金:0;   填充:0;   }/*左边小盒子样式*/.box1 {   位置:相对;   宽度:450 px;   身高:450 px;   边界:1 px固体# 999;   margin-left: 80 px;   margin-top: 50 px;   }   .box1 .img1 {/*设置左边图片大小*/宽度:450 px;   }/*遮罩层bg的样式*/.box1_bg {/*一开始要隐藏起来*/显示:没有;   位置:绝对的;   上图:0;   左:0;   宽度:300 px;   身高:300 px;   背景颜色:黄色;/*透明效果*/透明度:5;   光标:移动;   }/*右边大盒子样式*/.big_img {/*一开始要隐藏起来*/显示:没有;   宽度:540 px;   身高:540 px;   位置:绝对的;   上图:0;   左:470 px;   边界:1 px固体# 999;   溢出:隐藏;   }/*大盒子里面的图片样式*/.big_img .big_imgs {   位置:绝对的;   上图:0;   左:0;   宽度:800 px;   }   & lt;/style>   & lt;/head>   & lt; body>   & lt; div类=癰ox1"祝辞   & lt; img类=癷mg1"src=https://www.yisu.com/zixun/巴枷?2 - 1. - jpg”alt=" # ">   
  
     
  
     <脚本>//①整个案例可以分为三个功能模块//②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开- ->隐藏2个盒子功能//③黄色的遮挡层跟随鼠标功能。//④移动黄色遮挡层,大图片跟随移动功能。//事件源:   var box1=document.querySelector (“.box1”);   var bg=document.querySelector (“.box1_bg”);   var=大document.querySelector (“.big_img”);//1。鼠标经过盒子的时候,显示遮罩层和放大镜   box1.addEventListener(鼠标悬停,函数(){   bg.style。显示=翱椤?   big.style。显示=翱椤?   })//2。鼠标离开盒子的时候,隐藏遮罩层和放大镜   box1.addEventListener (mouseout,函数(){   bg.style。显示='没有';   big.style。显示='没有';   })//2 .鼠标移动的时候   box1.addEventListener (mousemove,函数(e) {   var x=e。pageX - this.offsetLeft;//x是鼠标到父盒子x距离   var y=e。pageY - this.offsetTop;//y是鼠标到父盒子y距离//控制台。日志(x, y)//最大移动距离,box1盒子的大小减去遮罩层的盒子大小   var max_x=box1。offsetWidth - bg.offsetWidth;   var max_y=box1。offsetHeight - bg.offsetHeight;   如果(max_x>=0)//*将坐标减去遮罩层盒子的一半鼠标就落到遮罩层的中间//移动距离X, Y   var X=X - bg.offsetWidth/2;   var Y=Y - bg.offsetHeight/2;//*当遮罩层超出box1的边框的时候,设一个边界卡住它   如果(X <=0) {   X=0   }else if (X>=max_x) {   X=max_x;   }   如果(Y <=0) {   Y=0   }else if (Y>=max_y) {   Y=max_y;   }//*把鼠标在盒子内的坐标给遮罩层实现跟随鼠标移动效果//注意加不上px然不起效果   bg.style。左=X +“px”;   bg.style。顶级=Y +“px”;//右边图片跟随移动,有一个小算法:big_img_x//遮挡层移动距离(X)/遮挡层最大移动距离(max_x)=大图片移动距离(bigX)/大图片移动的最大距离(big_img_x)//获取图片事件源   var big_img=document.querySelector (“.big_imgs”);//big_img_x求大图片移动的最大距离正方形距离一样的   var big_img_x=big_img。offsetWidth——大。offsetWidth;   var big_img_y=big_img。offsetWidth——大。offsetWidth;//bigX大图片的移动距离   var bigX=X * big_img_x/max_x;   var bigY=Y * big_img_y/max_x;   big_img.style。左=-bigX +“px”;   big_img.style。顶级=-bigY +“px”;   })>

js要如何实现仿京东放大镜的效果