JQuery实现放大镜效果（代码以及注释）

「爱情、让人受尽委屈。」 2024-04-18 10:01 71阅读 0赞

**1.css代码**  
\*\{  
margin: 0;  
padding: 0;  
box-sizing: border-box;  
\}

section \{  
position: relative;  
width: 430px;  
\}

.top \{  
position: relative;  
width: 430px;  
height: 350px;;  
\}

.top img \{  
width: 100%;  
height: 100%;  
\}

.top .mask \{  
position: absolute;  
width: 125px;  
height: 125px;  
background-color: rgba(0, 0, 0, 0.5);  
top: 0;  
left: 0;  
display: none;  
\}

.bottom img \{  
width: 82px;  
height: 60px;  
border: 1px solid transparent;  
\}

.bottom img:nth-child(1) \{  
border-color: black;  
\}

.right \{  
position: absolute;  
left: 100%;  
top: 0;  
width: 430px;  
height: 430px;  
background-image: url(./ims/lmt.jpeg);  
/\* 把小块选中的部分放大到整个框，因此放大倍数是 430/125 */  
/* 所以：背景图片的大小：430 \* 430 / 125 \*/  
background-size: 1479.2px 1204px;  
display: none;  
\}

**JQuery代码：**  
// 选中小图，上方切换大图的src  
// 记录选中小图的索引  
var eleIndex = 0;  
$(’.bottom img’).mouseenter(function () \{  
// 在选中图，修改eleIndex之前，eleIndex实际就代表上一次选中图的索引  
// 把上次选中小图的边框线颜色改为透明色  
 ( ‘ . b o t t o m i m g : e q ( (\`.bottom img:eq( (‘.bottomimg:eq(\{eleIndex\})`).css('border-color','transparent'); console.log(eleIndex); //获取标签的索引 eleIndex = $(this).index(); // 根据索引修改上方大图的src var src = $(this).attr('src'); $('.top img').attr('src', src); // $('.right img').attr('src',src)； $('.right').css('background-image'，`url($\{src\})`); // elelIndex修改之后，就代表本次选中小图的索引； $(`.bottom img:eq($\{eleIndex\})\`).css(‘border-color’,‘black’);  
\})

// 遮罩层，右侧的大图 显隐的操作  
$(’.top’).mouseenter(function()\{  
$(’.mask’).add(’.right’).show();  
// $(’.right’).show();  
\})  
$(’.top’).mouseleave(function()\{  
$(’.mask’).add(’.right’).hide();  
// $(’.right’).hide();  
\})  
// 监听鼠标事件，mask随之运动  
$(’.top’).mousemove(function(event)\{  
// jquery绑定事件中，event对象是jquery封装的对象，通过 .originalEvent 可以获取原生JS DOM Event对象  
// 从而使用event对象的坐标点  
// pageX：鼠标点距离浏览器可视区域左边界的距离  
// offset().left：标签距离浏览器可视区域左边界距离  
var left = event.originalEvent.pageX -  ( t h i s ) . o f f s e t ( ) . l e f t − 62.5 ; v a r t o p = e v e n t . o r i g i n a l E v e n t . p a g e Y − (this).offset().left - 62.5; var top = event.originalEvent.pageY - (this).offset().left−62.5;vartop=event.originalEvent.pageY−(this).offset().top - 62.5;

// 注意临界问题  
// 有取值范围【0-430-125】  
if(left < 0) left = 0;  
if(left > 305) left =305;  
if(top < 0) top = 0 ;  
if(top > 225) top = 225;

$(’.mask’).css(\{  
top:top ,  
left:left  
\})  
 ( ′ . r i g h t ′ ) . c s s ( ′ b a c k g r o u n d − p o s i t i o n ′ , ‘ (&\#x27;.right&\#x27;).css(&\#x27;background-position&\#x27;,\` (′.right′).css(′background−position′,‘\{-1*left*3.44\}px $\{-1*top*3.44\}px\`);  
\})  
**（上方代码仅供参考，不推荐复制粘贴！！！！！）**