基于javascript实现放大镜特效

本文实例为大家分享了javascript实现放大镜特效的具体代码，供大家参考，具体内容如下

我们在逛pc端商城时，鼠标放到商品上经常会看到一个类似放大镜效果的蒙层，

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }

  #min {
   width: 350px;
   height: 350px;
   border: 1px solid #ccc;
   position: absolute;
   left: 50px;
   top: 50px;
  }

  #min img {
   width: 350px;
   height: 350px;
  }

  #max {
   width: 500px;
   height: 500px;
   position: absolute;
   left: 500px;
   top: 50px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }

  #max img {
   position: absolute;
   left: 0;
   top: 0;
  }

  #mask {
   width: 200px;
   height: 200px;
   background: rgba(255, 0, 0, 0.5);
   position: absolute;
   left: 0px;
   top: 0px;
   cursor: pointer;
   display: none;
  }
 </style>
</head>

<body>
 <div id="min">
  <img src="img/min.jpg" alt="" />
  <div id="mask"></div>
 </div>
 <div id="max">
  <img src="img/max.jpg" id="maxImg" />
 </div>
 <script type="text/javascript">
  // 1.鼠标经过小盒子，遮罩层出现，大盒子出现
  // 2.遮罩层跟随鼠标移动
  // 3.遮罩层移动，大盒子里的图片反方向移动
  var oMin = document.getElementById('min');
  var oMax = document.getElementById('max');
  var oMask = document.getElementById('mask');
  var oMaxImg = document.getElementById('maxImg');
  oMin.onmousemove = function(e) {
   // 1.鼠标经过小盒子，遮罩层和大盒子出现
   oMask.style.display = 'block';
   oMax.style.display = 'block';
   // 2.拿到鼠标在小盒子上的坐标
   var minX = e.clientX - oMin.offsetLeft;
   var minY = e.clientY - oMin.offsetTop;
   // 3.将鼠标放置在遮罩层的中间
   minX = minX - oMask.offsetWidth / 2;
   minY = minY - oMask.offsetHeight / 2;
   // 4.遮罩层可以移动的最大距离
   var maxWidth = oMin.offsetWidth - oMask.offsetWidth;
   var maxHeight = oMin.offsetHeight - oMask.offsetHeight;
   // 限定遮罩层的位置
   if (minX > maxWidth) {
    minX = maxWidth;
   } else if (minX <= 0) {
    minX = 0;
   }
   if (minY > maxHeight) {
    minY = maxHeight;
   } else if (minY <= 0) {
    minY = 0;
   }
   // 设定遮罩层的偏移
   oMask.style.left = minX + 'px';
   oMask.style.top = minY + 'px';
   // 大图片移动的距离=遮罩层移动的距离/遮罩层可以移动的最大距离*大图片最大移动距离
   var ratioX = minX / maxWidth;
   var ratioY = minY / maxHeight;
   // 计算出大图片的移动距离
   oMaxImg.style.left = -ratioX * (oMaxImg.offsetWidth - oMax.offsetWidth) + 'px';
   oMaxImg.style.top = -ratioY * (oMaxImg.offsetHeight - oMax.offsetHeight) + 'px';
  };
  // 鼠标移开，遮罩层和大盒子消失
  oMin.onmouseout = function() {
   oMask.style.display = 'none';
   oMax.style.display = 'none';
  }
 </script>
</body>

</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现详情页放大镜效果

    本文实例为大家分享了js实现详情页放大镜的具体代码,供大家参考,具体内容如下 1.html <div id="small"> <div id="mo"> </div> <img src="img/timg.jpg"/> <div id = "frame"> </div> </div> <div id = "big"&g

  • JavaScript图片放大镜效果代码[代码比较简单]

    JavaScript图片放大镜效果代码[代码比较简单]

    #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

  • JS实现放大镜效果

    JS实现放大镜效果,供大家参考,具体内容如下 鼠标移到图片上就可以放大一块区域 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

  • 用js实现放大镜效果

    本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下 该放大区域用背景图片放大 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

  • js放大镜放大图片效果

    js放大镜放大图片效果

    我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le

  • 奇妙的Javascript图片放大镜

    奇妙的Javascript图片放大镜

    在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一

  • 用js实现放大镜的效果的简单实例

    用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

  • js实现淘宝浏览商品放大镜功能

    本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下 1.准备两张图片,其中一张图片分辨率为另一张图片的二倍. 2.前端页面布局 //box1位左侧原图,box2为右侧放大图额显示框,son为iv class="box1"> <div class="son"></div> <div class="ceng"></div> </div> <div

  • javascript实现电商放大镜效果

    本文实例为大家分享了javascript实现电商放大镜效果的具体代码,供大家参考,具体内容如下 学习内容: 1.event.pageX 属性返回鼠标指针的位置,相对于文档的左边缘. 2.clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标. 3.onmouseenter鼠标移入 4.onmouseleave鼠标移出 案例完整代码.html+css3+javascript 案例需求:鼠标点击左边图片时(鼠标呈十字架),遮罩层显示,右边盒子显示.且鼠标移动中心在遮

随机推荐