图片放大镜的原理：

两张相同的图片img1和img2，img1上有一个#dd的div，通过鼠标移动dd，根据dd区域内的图片，来裁剪img2的图片，并将img2的图片放大，显示出来

关键词：img1坐标，img2裁剪，img2放大

实现图片的放大效果，一共分为6步：

1. 为img1添加鼠标事件

2. 鼠标进入时dd显示，鼠标移出时dd隐藏

3. 获得鼠标的坐标 mouseX，mouseY

4. dd随鼠标的移动而移动

5. 对img2进行裁图处理 clip=“rect（top，width，height，left）”

6. 将img2图片放大

公式：left=（width-倍数*mouseX）/倍数+x

top= 10-mouseY+y

<!DOCTYPE html>

<html>
<head>
<title>图片放大镜</title>
<style type="text/css">
#img1{
width: 322px;
height: 300px;
position: absolute;
top: 10px;
left: 10px;
}
#img2 {
width: 322px;
height: 300px;
position: absolute;
top: 10px;
left: 340px;

display:none;

}
#dd {
width: 100px;
height: 60px;
border: 2px solid #f60;
position: absolute;
top: 10px;
left: 10px;

}
</style>

</head>

<body>

<img id="img1" src="data:images/10.jpg" />
<div id="dd"></div>
<img id="img2" src="data:images/10.jpg" />
</body>
<script>

// 1 为img1添加鼠标事件
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var dd = document.getElementById("dd");
img1.addEventListener("mouseover",function(){

// 2 鼠标进入dd显示
dd.style.display="";

img2.style.display="block";

// 3 获取鼠标的坐标
var mouseX= event.clientX;//获得鼠标在可视窗口的横坐标
var mouseY= event.clientY;

// 4 dd随鼠标而移动

// 注意：-50，-30可以使鼠标在dd的中间位置
dd.style.left = mouseX-50+"px";
dd.style.top =mouseY-30+"px";

// 5 对img2进行裁图 clip="rect(top,width,height,left)"
var rtop = mouseY-10-30;/鼠标的横坐标-img2的top-dd的height/2
var rleft= mouseX-10-50;//鼠标的纵坐标-img2的left-dd的width/2;
var rwidth =rleft+100;
var rheight= rtop+60;
img2.style.clip="rect("+rtop+"px,"+rwidth+"px,"+rheight+"px,"+rleft+"px)";

// 6 将img2图片放大

//公式left=（width-倍数*mouseX）/倍数+x; top=10-mouseY+y;
img2.style.zoom =2;//图片扩大2倍
img2.style.left= (322-2*mouseX)/2+70+"px";
img2.style.top=10-mouseY+40+"px";
},false);

img1.addEventListener("mouseout",function(){

//2 鼠标移出dd隐藏
dd.style.display="none";
},false);
</script>

</html>

　原理图：

JavaScript--图片放大镜的更多相关文章

  1. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  2. [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  3. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  4. 【荐】JavaScript图片放大技术（放大镜）示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  6. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  7. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

  8. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  9. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  10. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

随机推荐

  1. Windows系统JDK安装配置

    JDK和JRE的安装 打开java的官方网站,下载安装程序,版本根据自己情况选择: 双击安装程序: 点击"下一步": 此处推荐默认路径安装,如果自定义安装目录,则需记住自定义的安装 ...

  2. Android总结之json解析（FastJson Gson 对比）[申明：来源于网络]

    Android总结之json解析(FastJson Gson 对比)[申明:来源于网络] 地址:http://blog.csdn.net/u014031072/article/details/5392 ...

  3. 反射RelectionDemo

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  4. SET || BZOJ 1588: [HNOI2002]营业额统计 || Luogu P2234 [HNOI2002]营业额统计

    题面:P2234 [HNOI2002]营业额统计 题解:随便写写 注意:cmath中abs函数返回的是一个浮点数,在bzoj上会ce 代码: #include<cstdio> #inclu ...

  5. 小甲鱼零基础python课后题 P22 021函数：递归是神马

    0.递归在编程上的形式是如何表现的呢? 答:在编程上,递归表现为函数调用本身这么一个行为. 1.递归必须满足哪两个基本条件? 答:1函数调用自己. 2有正确的返回条件 2.思考一下,按照递归的特性,在 ...

  6. Django ORM中datetiem数据类型字段无法对比处理办法

    在做商城项目中浏览足迹时,我利用浏览商品的ID和浏览的时间保存到browse表中,然后在我的足迹页面根据最近日期进行展示 条件:每天/个商品只能如一次表 后台代码如下: #存储浏览足迹到browse表 ...

  7. java中 16进制字符串 与普通字符串 与 byte数组 之间的转化

    方法依赖commons-codec包  maven的引入方式如下 <dependency> <groupId>commons-codec</groupId> < ...

  8. 支持Linux系统的加密狗

    深思数盾 https://www.sense.com.cn/ 产品:精锐5 版本:标准版.精灵版.IE版.时钟锁 快速实现高安全度的软件保护,轻松定义多种授权模式1.防止软件盗版,防止逆向工程 通过增 ...

  9. Python super初始化理解过程

    # -*- coding:utf-8 -*-<br data-filtered="filtered"> class A(object): def __init__(se ...

  10. .NET 内存分配笔记

    阅读博客http://jonskeet.uk/csharp/memory.html的笔记(个人水平有限,如若翻译.记录有误,请提,谢谢~) 误区:引用类型保持在堆中,值类型保持在栈中. 问题:前半句正 ...