原生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实现图片放大镜的插件就全部完成了~
如果有任何疑问,欢迎大家留言指正~
原生JS实现图片放大镜插件的更多相关文章
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
- 原生JS实现图片循环切换
<!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...
- 基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
随机推荐
- GitHub使用(三) - GitHub安装及初步使用
1. 首先下载Windows版本“GitHubSetup.exe”如下,下载地址为:https://desktop.github.com/
- Excel的实用函数
在介绍Excel函数前先说明两个概念:公式和函数. 公式:由用户自行设计对工作表进行计算和处理的计算式,以等号"="开始,其内部可以包括函数.引用.运算符和常量. 函数:即是预先定 ...
- Java虚拟机-运行时数据区域
Java虚拟机管理的内存包括如图所示的运行时数据区域: 下面分别进行介绍: 1)程序计数器(Program Counter Register) 占用的内存空间比较小,主要作用就是标识当前线程执行的字节 ...
- Twitter的分布式系统中ID生成方法——Snowflake
Twitter-Snowflake算法产生的背景相当简单,为了满足Twitter每秒上万条消息的请求,每条消息都必须分配一条唯一的id,这些id还需要一些大致的顺序(方便客户端排序),并且在分布式系统 ...
- Windows下如何创建低权限进程
1. 前言 在使用 Sysinternals 出品的 Process Explorer 过程中,对 “Run as Limited User” 功能的实现方式颇感兴趣,一番搜寻之下发现Mark ...
- Java Socket通信以及可能出现的问题解决
Java中基于TCP协议实现网络通信的两个类:客户端的Socket和服务器端的ServerSocket. Socket通信模型如图所示: 不管Socket通信的功能有多复杂,任何socket通信过程的 ...
- UrlRewriter配置IIS支持伪静态
使用UrlRewriter时遇到了一些问题,在园子里的博问中找到了Astar的回答,防止以后找不到,就记录下来了. UrlRewriter.NET官方地址:http://urlrewriter.net ...
- 利用jdbc简单封装一个小框架(类似DBUtils)
利用jdbc写的一个类似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.Inpu ...
- Html事件冒泡
原以为span不同于input,事件冒泡会被父级标签吞噬,写了个测试事件冒泡的Demo,发现并不是想得那样.另外:event.stopPropagation()以及event.stopImmediat ...
- Win CE 6.0 获取手持机GPS定位1----基础知识 (C#)
一.GPS全球定位系统的组成 (1)GPS卫星(空间部分) 由沿接近环形的地球轨道运行的24颗卫星组成,位于距地表20200千米的高空,均匀分布在6个轨道面上(每个轨道面4颗),轨道倾角55度.此外, ...