原生JS实现京东查看商品点击放大


Posted in Javascript onDecember 21, 2020

本文实例为大家分享了JS实现京东查看商品点击放大的具体代码,供大家参考,具体内容如下

需求分析

鼠标移入,出现黄色的遮罩,和用来放大的盒子
鼠标移出,遮罩和放大的盒子消失
鼠标在小图片上面进行移动的时候

  • 黄色遮罩层会随着鼠标一起移动
  • 用来放大显示的图片,也跟着一起移动

实现效果:

原生JS实现京东查看商品点击放大

html部分:

<div class="box">
  <div class="small">
   <img src="./images/s.jpg" alt="">
   <div class="mask"></div>
  </div>
  <div class="big">
   <img src="./images/big.jpg" alt="">
  </div>
</div>

css部分:

<style>
  * {
   margin: 0;
   padding: 0;
  }
  
  .box {
   width: 450px;
   height: 450px;
   border: 1px solid #aaa;
   position: relative;
   top: 100px;
   left: 100px;
  }
  
  .small {
   width: 450px;
   height: 450px;
   position: absolute;
  }
  
  .mask {
   position: absolute;
   background-color: rgba(255, 255, 0, .3);
   /* border: 1px solid #ff0; */
   width: 225px;
   height: 225px;
   top: 0;
   left: 0;
   display: none;
  }
  
  .big {
   width: 450px;
   height: 450px;
   border: 1px solid #aaa;
   position: absolute;
   left: 500px;
   top: 0;
   overflow: hidden;
   display: none;
  }
  
  .big>img {
   width: 900px;
   height: 900px;
   position: absolute;
  }
</style>

js部分:

//一步一步来,不慌
 //首先来个onload事件,等待页面加载完在执行,
 window.onload = function() {
  //获取DOM一波 用到什么拿什么
  var small = document.querySelector(".small");
  var box = document.querySelector(".box");
  var big = document.querySelector(".big");
  var mask = document.querySelector(".mask");
  var bigimg = document.querySelector(".big img");

  // 第一部分 -----------------------------------------------开始
  //分析一下 我们第一步要做的事情就是鼠标移入,移除的操作
  //在分析鼠标移入会怎么样子呢?
  //鼠标移入会有黄色透明框框的显示,以及大图的显示
  small.onmouseover = function() {
   big.style.display = "block";
   mask.style.display = "block";
  };
  //在分析鼠标移出会怎么样子呢?
  //鼠标移入会有黄色透明框框的隐藏,以及大图的隐藏
  small.onmouseout = function() {
   big.style.display = "none";
   mask.style.display = "none";
  };
  // 第一部分 -----------------------------------------------结束

  // 第二部分 -----------------------------------------------开始
  //我们需要将鼠标在黄色的透明框的中间显示
  small.onmousemove = function(e) {
    var x = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
    var y = e.pageY - box.offsetTop - mask.offsetHeight / 2;
    console.log(x, y);
    //获取 左面小图的max值
    var max_x = small.clientWidth - mask.offsetWidth;
    var max_y = small.clientHeight - mask.offsetHeight;
    //获取 右面大图的max值
    var MAX_X = bigimg.offsetWidth - big.clientWidth;
    var MAX_Y = bigimg.offsetHeight - big.clientHeight;

    //设置这个黄色的框框在这个盒子里面的最大移动区域
    //左面/上面 设置
    if (x < 0) {
     x = 0;
    }
    if (y < 0) {
     y = 0;
    }
    //右面/下面 设置
    if (x > max_x) {
     x = max_x;
    }
    if (y > max_y) {
     y = max_y;
    }

    mask.style.left = `${x}px`;
    mask.style.top = `${y}px`;

    //这里运用到了数学中的等比的概念,因为查看的图要比现在看到的大,所以等比例增大
    var X = x / max_x * MAX_X;
    var Y = y / max_y * MAX_Y

    //到了这里,咱们已经将最大,最小的临界点已经获取完毕
    //现在给右面的大图进行定位移动即可
    bigimg.style.left = `-${X}px`;
    bigimg.style.top = `-${Y}px`;
   }
   // 第二部分 -----------------------------------------------结束
}

案例分享到这里。

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

Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
基于javascript实现移动端轮播图效果
Dec 21 #Javascript
原生JS实现pc端轮播图效果
Dec 21 #Javascript
js实现移动端轮播图滑动切换
Dec 21 #Javascript
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
微信小程序自定义支持图片的弹窗
Dec 21 #Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
You might like
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
js实现动态时钟
2020/03/12 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python银行系统实现源码
2019/10/25 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
技术总监岗位职责
2013/12/05 职场文书
迟到检讨书900字
2014/01/14 职场文书
兴趣小组活动总结
2014/05/05 职场文书
团队拓展训练感想
2015/08/07 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL