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 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
javascript的BOM汇总
Jul 16 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
简单的js计算器实现
Oct 26 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue实现简单图片上传
Jun 30 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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 callback函数使用方法和注意事项
2015/01/23 PHP
PHP 微信支付类 demo
2015/11/30 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
jquery封装的对话框简单实现
2013/07/21 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python获取当前时间的方法
2014/01/14 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
大学生毕业自我鉴定
2013/11/06 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
道歉的话怎么说
2015/05/12 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
民事纠纷协议书
2016/03/23 职场文书
如何撰写创业策划书
2019/06/27 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python process模块的使用简介
2021/05/14 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers