javascript实现电商放大镜效果


Posted in Javascript onNovember 23, 2020

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

学习内容:

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

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

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

javascript实现电商放大镜效果

步骤:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
用webAPI实现图片放大镜效果
Nov 23 #Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
JavaScript实现网页留言板功能
Nov 23 #Javascript
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
js观察者模式的弹幕案例
Nov 23 #Javascript
js异步接口并发数量控制的方法示例
Nov 22 #Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
You might like
资料注册后发信小技巧
2006/10/09 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
基于jquery的表格排序
2010/09/11 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
家长对孩子评语
2014/01/30 职场文书
中国好声音华少广告词
2014/03/17 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
报到证办理个人委托书
2014/10/06 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js