javascript实现电商放大镜效果

2024-10-01 18:17:42

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

学习内容：

1、event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。
2、clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。
3、onmouseenter鼠标移入
4、onmouseleave鼠标移出

案例完整代码。html+css3+javascript

案例需求:鼠标点击左边图片时（鼠标呈十字架），遮罩层显示，右边盒子显示。且鼠标移动中心在遮罩层中心，右边大盒子显示鼠标点到的地方，以800：350比例显示。遮罩层只能规定左边盒子范围内移动而且不给超出。

步骤：

1. 查找元素

1.1 查找 main 总分区
1.2 查找 small 盒子
1.3 查找 small 盒子内的 img 小图片
1.4 查找 mask 遮罩层
1.5 查找 big 盒子
1.6 查找 big 盒子内的 img 大图片

2. 鼠标移入 main 的时候

2.1 显示遮罩盒子
2.2 显示大图分区

3. 鼠标移出 main 的时候

3.1 隐藏遮罩盒子
3.2 隐藏大图分区

4. 鼠标在 main 移动的时候 !!!

4.1 遮罩盒子跟随鼠标移动
4.2 遮罩盒子在鼠标中心处理
4.3 遮罩盒子在分区边界内移动处理
4.4 大图片 <反向> <按比例> 跟随鼠标移动

注意. 获取元素偏移值和宽高

1. 获取分区的水平，垂直偏移值
2. 获取分区的宽度，高度
3. 获取遮罩盒子的宽度，高度 (隐藏的盒子无法获取宽高)
4. 获取大图片的宽度，高度 (隐藏的盒子无法获取宽高)

html代码:

<body>
 <!-- 整个大盒子 -->
 <div class="main" id="main">
  <div class="small">
   <!--小图-->
   <img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" />
   <!-- 遮挡层,黄色的小方块 -->
   <div class="mask"></div>
  </div>
  <!--大层-->
  <div class="big">
   <!--大图-->
   <img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" />
  </div>
 </div>
</body>

css代码:

 <style>
  * {
   margin: 0;
   padding: 0;
  }

  .main {
   width: 350px;
   height: 350px;
   margin: 100px;
   border: 1px solid #ccc;
   position: relative;
  }

  .big {
   width: 400px;
   height: 400px;
   position: absolute;
   top: 0;
   left: 360px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }

  .mask {
   width: 175px;
   height: 175px;
   background: rgba(255, 255, 0, 0.4);
   position: absolute;
   top: 0px;
   left: 0px;
   /* 把鼠标指针换成移动图标 */
   cursor: move;
   display: none;
  }

  .small {
   position: relative;
   height: 350px;
   width: 350px;
  }

  .active .mask,
  .active .big {
   display: block;
  }

  .big img {
   /* 相对定位：相对自己原本的位置定位，原来的位置保留的 */
   position: absolute;
  }
</style>

javascript代码:

<script>
 //查找元素
 var main = document.querySelector(".main");
 var small = document.querySelector(".small"); //左边小盒子
 var smallImg = document.querySelector(".smallImg");
 var mask = document.querySelector(".mask"); //黄色遮罩层
 var big = document.querySelector(".big");//右边小盒子
 var bigImg = document.querySelector(".big .bigImg");

 //2. 鼠标移入 main 的时候
 //2.1 显示 遮罩盒子
 // 2.2 显示 大图分区
 main.onmouseenter=function () {
  mask.style.display="block";
  big.style.display="block";
 };
 main.onmouseleave=function () {
  mask.style.display="none";
  big.style.display="none";
 };
 // 4. 鼠标在 main 移动的时候 !!!
 //  4.1 遮罩盒子 跟随 鼠标移动
 // 4.2 遮罩盒子 在 鼠标中心 处理
 // 4.3 遮罩盒子 在 分区边界 内移动处理
 // 4.4 大图片 <反向> <按比例> 跟随 鼠标移动
 small.onmousemove=function (e) {
  var x=e.pageX-100-(175/2);  //盒子的宽高为300px，因为鼠标默认在左上角。因为需要向左移动自身一半
  var y=e.pageY-100-(175/2);  盒子的宽高为300px，因为鼠标默认在左上角。因为需要向下移动自身一半
  if(x<0) x=0;      //规定遮罩层移动范围。如果遮罩层超出了小盒子边框，x就重置为0.
  if(y<0) y=0;      // //规定遮罩层移动范围。如果遮罩层超出了小盒子边框，y就重置为0.
  if(x>175) x=175;     //遮罩层本身的宽高为175
  if(y>175) y=175;
  mask.style.top=(y)+"px";
  mask.style.left=(x)+"px";
  bigImg.style.top=(-y*(800/350))+"px";  //右边放大效果，以800：350显示
  bigImg.style.left=(-x*(800/350))+"px";  //在xy前面加-号是因为需要反向显示
 }
</script>

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

电子商务网站上的常用的js放大镜效果

复制代码代码如下: jsFiddleRun again Edit this fiddle Result HTML <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>放大镜</title> <style> img{ vertical-align:bottom;} .mod_zoom{ overflow:hidden; zoom:
奇妙的Javascript图片放大镜

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

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

1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi
JavaScript 图片切割效果(放大镜)第1/4页

上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了. 近来我把其中的拖放效果和缩放效果单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了. 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考图片切割系统 . 效果预览请看这里完整实例下载代码太多贴不出来,只好给个效果图: 程序说明这个效果主要分三个部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放和层的缩放我已经在其他两篇
基于angularjs实现图片放大镜效果

前言一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里没有winth() .height()方法. 最好我还是引入了jquery,在同一scope上绑定了宽度高度.下面上源码,顺便我会把里面的一些注意的点说一下. 效果图首先说明下 1.首先使用了两个同级指令,并在两个同级指令间进行通信,同级指令间通信,非常简单,就是不要让同级的指令生成独立的scope,并且在同一个作用域下就完成了
原生js写的放大镜效果

我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me
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 图片放大镜（可拖放、缩放效果）第1/4页

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

javascript实现电商放大镜效果

相关推荐

随机推荐