一、目标实现效果

在左边的小图片上实现鼠标经过右边显示图片的放大图片

二、实现过程及其思路展示

1、给鼠标设置一个'mouseover'事件在鼠标经过的时候可以将遮罩层和右边的放大图片显示设置为块级显示(页面加载时这两个为none也就是隐藏的状态),再给鼠标设置一个'mouseout',在鼠标超出图片所在范围的时候再将上面的两个属性的display设置为none,再次隐藏起来。

2、鼠标添加'mousemove'事件,再鼠标移动的时候给遮罩层赋予一个坐标跟随鼠标的移动而移动,而且需要在此时给右边的被放大的盒子添加位置(但是左右两边的位移是相反的,需要特别注意,只需要给鼠标产生位移的距离添加'-'号就行了)。

3、实现的过程中还有很多的小细节,由于我不是大神,所以说不能面面俱到,所以直接上代码,可以在实践中寻找经验,体验代码之美。

代码如下:

1、js代码段,此处需要单独创建一个js文件,并且调用到html的head中(由于还是小白阶段,所以暂时没有写注释,有不懂的可以私信问我,虽然那我也不一定会哈哈哈哈)

window.addEventListener('load', function () {var mask = this.document.querySelector('.mask');var bigImg = this.document.querySelector('.big_img');var smallImg = this.document.querySelector('.small_img');var magnifier = this.document.querySelector('.magnifier');var imgLeft = this.document.querySelector('#small');var imgRight = this.document.querySelector('#big');magnifier.addEventListener('mouseover', function () {mask.style.display = 'block';bigImg.style.display = 'block';smallImg.addEventListener('mousemove', function (e) {var x = e.pageX - smallImg.offsetLeft;var y = e.pageY - smallImg.offsetTop;var maskLeft = x - mask.offsetWidth / 2;var maskTop = y - mask.offsetHeight / 2;// 此处忘记给smallImg的源对象添加宽度和高度,导致遮罩层显示出现错误var ssTop = smallImg.offsetWidth - mask.offsetWidth;if (maskLeft <= 0) {mask.style.left = '0';}else {mask.style.left = maskLeft + 'px';}if (maskTop <= 0) {mask.style.top = '0';}else {mask.style.top = maskTop + 'px';}if (maskTop >= ssTop) {mask.style.top = ssTop + 'px';}if (maskLeft >= ssTop) {mask.style.left = ssTop + 'px';}// 定义一个倍数关系,联系到与被放大的图像var bb = imgRight.offsetWidth / imgLeft.offsetWidth;imgRight.style.top = -bb * maskTop + 'px';imgRight.style.left = -bb * maskLeft + 'px';});})magnifier.addEventListener('mouseout', function () {mask.style.display = 'none';bigImg.style.display = 'none';})})

2、html页面,由于html的页面较为简便,所以说是将css文件也写到了这里(同样没有注释哦)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模仿京东的放大镜效果</title><style>* {margin: 0;padding: 0;}.magnifier {position: relative;height: 450px;width: 450px;}.small_img {position: absolute;height: inherit;width: inherit;top: 0;left: 0;z-index: 1;}.mask {display: none;position: absolute;left: 0;top: 0;height: 300px;width: 300px;background-color: rgb(223, 223, 80);/* 设置盒子的透明度 */opacity: .5;cursor: move;z-index: 999;}.big_img {display: none;position: absolute;top: 0;left: 500px;height: 600px;width: 600px;overflow: hidden;}#small {position: absolute;top: 0;left: 0;}#big {position: absolute;top: 0;left: 0;}</style><script src="js/7.3.js"></script>
</head>
<div class="magnifier"><div class="small_img"><div class="mask"></div><img src="data:image/small.jpg" alt="" id="small"></div><div class="big_img"><img src="data:image/big.jpg" alt="" id="big"></div>
</div><body>
</body></html>

3、用到的两张图片是在京东的官网上抠出来的(你们也可以去扒几张)

4、html中需要改一下路径根据你所创建的文件地址直接修改就行了。

5、小白想学前端的话建议去看一下黑马的课程哦,我这是在黑马白嫖的pink老师的课嘻嘻嘻。

仿京东的图片放大镜案例相关推荐

  1. 仿京东购物界面放大镜效果

    背景知识:元素偏移量 offset offset 翻译为 偏移量 ,使用 offset 的相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽 ...

  2. 仿京东淘宝放大镜特效 jqzoom.js

    效果图如下: HTML 文本源码: 1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <met ...

  3. 使用react 写一个 仿淘宝 图片放大镜效果

    效果图 人狠话不多,先上效果图,看看是不是各位想要的再往下看 使用方法 import React, { Component } from "react"; import Image ...

  4. 29 仿京东放大镜案例

    1.仿京东放大镜案例 功能需求: 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,鼠标一离开隐藏2个盒子功能 // 当页面全部加载完毕,因此需要load,执行里面的js代码 window.addEv ...

  5. 仿京东放大镜效果的实现

    仿京东放大镜 (1) 整个案例可以分为三个功能模块 (2) 鼠标经过小图片盒子, 绿色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 (3)绿色的遮挡层跟随鼠标功能. (4)移动绿色遮挡层,大图片 ...

  6. 仿京东PC网页商品详情的放大镜效果(原理+代码)

    实现效果 黑色只不过是转gif出问题而已 准备工作 1. 访问该网址,理解我们要弄的放大镜效果,鼠标经过商品图片,显示一个黄色的放大选区,右边显示该选区的大图. 2. 获取商品图片和商品大图 [摩托罗 ...

  7. vue版本的仿京东放大镜代码还有原生js版本的。(组件封装)

    vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...

  8. js操作元素:改变元素内容有两种方式: interText 和 innerHTML的区别, 常用的元素的属性操作, 仿电脑系统时间问好 ,表单元素的属性操作 ,案例:仿京东显示隐藏密码 ,样式属性操作

    文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...

  9. JS实现放大镜的效果 —— 仿京东详情页中的产品放大效果

    案例简述 这次案列是模仿京产品详情页中,产品图放大的效果. 简单说下效果的具体步骤: 1.鼠标经过预览区时,遮盖层和产品大图显示:鼠标离开则隐藏 2.遮盖层跟随鼠标进行移动,并且遮盖层只在预览区域内移 ...

最新文章

  1. 项目构建之maven篇:2.HelloWorld项目构建过程
  2. Android JetPack Lifecycle源码解析
  3. 大家都说 Java 反射效率低,为什么呢?
  4. Qt中ui文件的使用
  5. 吴恩达深度学习笔记6-Course2-Week2【优化算法】
  6. JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
  7. android滚轮实现时间年月日选择
  8. awk一些很恐怖的特性
  9. 微型计算机突然断电什么信息全部都是,微型计算机的硬件组成阶段作业(函授2014春).doc...
  10. mysql 左连接 和全连接_mysql左连接,右连接,内连,全连
  11. modbus_tk与Modubs Slave结合使用
  12. 如何将php文件通过后台导入,如何将通过url传到php后台的json在后台再次转换为json格式?...
  13. IDEA如何导入git仓库的分支代码
  14. 【CPI指数预测】基于matlab BP神经网络CPI指数预测【含Matlab源码 662期】
  15. 浙江大学-西湖大学联合培养博士生
  16. 在termux中利用安卓的vulkan库加速NCNN
  17. java font.getfont_FontManager.getFont(方正黑体);这个方法返回值为null
  18. deglitch 技术_fdc2214中文资料-技术参考.pdf
  19. 用java代码编写出喜字_喜字是怎么写的
  20. 2019.11.28

热门文章

  1. 米莱狄的机器人是_王者荣耀:米莱狄超级暴力出装教学,这机械真的打不死
  2. 【网易云信】直播推流SDK
  3. DataBind教学
  4. 基于51单片机的智能教室系统
  5. html 期末大作业,qx.html
  6. linux--红帽系统nfs服务器配置
  7. Vue 数组更新与排序过滤
  8. informix数据同步到mysql_informix数据库扩容操作步骤
  9. OpenSSL密码库算法笔记——第5.1章 椭圆曲线群与点的定义
  10. ArrayMap源码分析