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 相关文章推荐
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
python的Template使用指南
2014/09/11 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python中class的定义及使用教程
2019/09/18 Python
python关于变量名的基础知识点
2020/03/03 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
校园达人秀策划书
2014/01/12 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
参赛口号
2014/06/16 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
家庭困难证明
2014/10/12 职场文书
实习生矿工检讨书
2014/10/13 职场文书
公司奖励通知
2015/04/21 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers