原生JS实现简单的放大镜效果

最新推荐文章于 2022-10-06 22:43:05 发布

Callback_heaven

最新推荐文章于 2022-10-06 22:43:05 发布

阅读量306

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_41564885/article/details/79502594

版权

web前端专栏收录该内容

54 篇文章 1 订阅

订阅专栏

目标：实现放大镜的效果

当鼠标放入图片时，放大图片，该效果多为电商网站使用

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
 #preview>#mediumDiv img
 {
     vertical-align:middle;
     width:350px;
     height:350px;
 }
#preview{
     width:460px;
     float:left;
     position:relative;
 }
  #preview>#mediumDiv>#mask{
     position: absolute;
     width: 175px;
     height: 175px;
     background: #ffa;
     opacity: 0.5;
     top: 0;
     left: 0;
     display:none;
 }
 #preview>#mediumDiv>#superMask{
     position: absolute;
     width: 350px;
     height: 350px;
     opacity: 0;
     top: 0;
     left: 0;
     cursor: move;
 }
 #preview>#largeDiv{
     position: absolute;
     width: 400px;
     height: 400px;
     background: #fff;
     border: 1px solid #ddd;
     top: 0;
     left: 355px;
     z-index: 999;
     display: none;
 }
 </style>	
 </head>
 <body>
<div id="preview">
<div id="mediumDiv">
 <img id="mImg" src="3.jpg">
<div id="mask"></div>
<div id="superMask"></div>
</div>
<div id="largeDiv"></div>
</div>
 </body>
<script>
//获取lgDiv作为显示放大图
var lgDiv = document.getElementById("largeDiv");
//设置lgDiv的背景图为放大图
lgDiv.style.backgroundImage = "url(4.jpg)";
//获取mask作为div中的放大效果(方块)
var mask = document.getElementById("mask"),
//获取mask上作为整体控制位置的sMask
sMask = document.getElementById("superMask");
//给sMask绑定鼠标移入事件，移入sMask更改mask和lgDiv
sMask.onmouseover = function(){
//显示黄色小方块mask
mask.style.display = "block";
//显示放大图效果lgDiv
lgDiv.style.display="block";
}
//给覆盖在mask上的sMask绑定鼠标移开事件
sMask . onmouseout = function(){
//当鼠标移开覆盖在mask上的sMask的时候
//将黄色小框设置为不显示
mask.style.display = "none";
//将外部放大框隐藏
lgDiv.style.display="none";
}
//设置最小与最大
var MSIZE=175, MAX=175;
//定义鼠标放入sMask事件
sMask.οnmοusemοve=function(e){
//取消冒泡
//定义top 为当前的元素的offsetY值-175
//让光标在黄色方块的正中间
var top=e.offsetY-MSIZE/2,
//定义左方
left=e.offsetX-MSIZE/2;
if(top<0) top=0; 
else if(top>175) top=175;
//如果黄色方块超出
if(left<0) left=0;
else if(left>175) left=175;
mask.style.left=left+"px";
mask.style.top=top+"px";
lgDiv.style.backgroundPosition=-16/7*left+"px "+(-16/7*top)+"px";	
}
</script>
</html>

Callback_heaven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现简单的放大镜效果

目标：实现放大镜的效果当鼠标放入图片时，放大图片，该效果多为电商网站使用代码：&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®&
复制链接

扫一扫