JS实现图片放大镜插件详解


Posted in Javascript onNovember 06, 2017

前  言

我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的……

先看一下我们要是实现的最终效果是怎么样的    

JS实现图片放大镜插件详解

看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~

1实现思路

① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替)。

② 确定放大比例,最重要的一点,鼠标指上的div与放大效果的div,和原图与放大图的比例要相等。

③ 将鼠标指上后的放大效果显示出来。

2具体实现步骤

 首先,我们先来建三个div。

<div id="wrapper"> 
     <!--小图-->
    <div id="img_min"> 
       <!--图片-->
       <img src="img/11.png" alt="min"> 
       <!--跟随鼠标的白块-->
       <p id="mousebg"></p> 
     </div> 
   <!--大图-->
     <div id="img_max">
       <img id="img2_img" src="img/11.png" alt="max">
     </div> 
   </div>

我们HTML代码部分已经全部完成,接下来,我们用JS来实现功能:

给原图添加三个事件,分别是,鼠标进入,鼠标移动,鼠标移出。

当鼠标移入原图时,鼠标指上时的div和放大效果的div同时显示。

img1.onmouseover = function () { 
       //鼠标进入 
       img2.style.display = 'block'; 
       mousebg.style.display = 'block'; 
      
     }

鼠标移出事件:

img1.onmouseout = function () { 
       //鼠标离开 
       img2.style.display = 'none'; 
       mousebg.style.display = 'none'; 
     }

重点是当鼠标移动时,根据p标签与原图的位置,来显示大图需要放大的部分。

var _event = event||window.event;//兼容性处理 
var mouseX = _event.clientX - img1.offsetLeft; 
 //计算鼠标相对与小图的位置 
var mouseY = _event.clientY - img1.offsetTop;

在做位置分析时,需要考虑四种临界情况:

就是当鼠标从图片的上、下、左、右刚刚进入时,并且这个距离小于鼠标指上的div宽度的二分之一时,放大效果的div显示出来,并不移动。

//特殊情况处理,分别靠近四条边的时候 
 if(mouseX<mousebg.offsetWidth/2){ 
  mouseX = mousebg.offsetWidth/2; 
   } 
 if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
  mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
   } 
 if(mouseY<mousebg.offsetHeight/2){ 
  mouseY = mousebg.offsetHeight/2; 
 } 
 if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
  mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
 }

最后,计算大图的显示范围:

//计算大图的显示范围 
 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
 img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
 //使鼠标在白块的中间 
mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";

这样,我们用JS实现图片放大镜的插件就全部完成了。

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

Javascript 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
js实现登录验证码
Dec 22 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
js定时器实现倒计时效果
Nov 05 #Javascript
Vuejs实现购物车功能
Nov 05 #Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 #Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
You might like
php生成随机密码的三种方法小结
2010/09/04 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Python完全新手教程
2007/02/08 Python
python实现dict版图遍历示例
2014/02/19 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
Ruby如何定义一个类
2012/10/08 面试题
法制宣传教育方案
2014/05/09 职场文书
水电工程师岗位职责
2015/02/13 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
合作意向书范本
2019/04/17 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL