原生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 相关文章推荐
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
使用vue实现HTML页面生成图片的方法
Mar 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中判断变量为空的几种方法小结
2013/11/12 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
jQuery入门知识简介
2010/03/04 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python装饰器初探(推荐)
2016/07/21 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
快速创建python 虚拟环境
2020/11/28 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
总经理职责范文
2013/11/08 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
高校教师思想汇报
2014/01/11 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
中国梦团日活动总结
2014/07/07 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
驻村工作简报
2015/07/20 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
2019销售早会主持词
2019/06/27 职场文书
成人成长感言如何写?
2019/08/16 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
MySQL多表查询机制
2022/03/17 MySQL