当前位置：文江博客话题详情

JavaScript-请问如何用JS实现放大镜效果？

发布于 2016-12-29 11:24:21 字数 40 浏览 1158 评论 3

请问图片局部放大效果是怎么实现，有什么限制条件吗，请教原理和方法。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

偏爱自由 2017-09-05 16:13:41

原理：
放大镜的功能其实是两幅图片，小图片响应鼠标的移动事件捕捉鼠标的坐标，然后在根据坐标映射到大图片上去，在浮动图层中显示大的图片。
实例：

<!docutype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>请问放大镜效果是怎么实现的？</title>
<style type="text/css">
body {background:#f6f6e7;font: normal 14px/1.4em YaHeiConsolas,"Microsoft YaHei",Georgia, "Times New Roman", Times, serif;width:980px;margin:20px auto}
h1 {color:#4f3c00;font: 28px/2em YaHeiConsolas,"Microsoft YaHei",Georgia, "Times New Roman", Times, serif }
h2 {color:#4f3c00;font: 22px/1.5em YaHeiConsolas,"Microsoft YaHei",Georgia, "Times New Roman", Times, serif }
#smallImgCon {position:relative;left:0;top:0;}
#magnifierCon {height:276px;width:276px;position:absolute;overflow:hidden;z-index:3}
#magnifierCon img#magnifierBg {position:absolute;z-index:2}
#magnifierCon img#largeImg {position:absolute;z-index:1}
</style>
</head>
<body>
<h1>大气象 实例演示</h1>
<h2>放大镜</h2>
<div onMouseMove="imgZoomOut(event)" id="smallImgCon">
<img src="airport_small_1.jpg" id="smallImg"/>    
<div id="magnifierCon" style="display:none">
<img src="magnifier.png" id="magnifierBg"/>
<img src="airport_large_1.jpg" id="largeImg"/>    
</div>
</div>

<script type="text/javascript">

var smallImgCon = document.getElementById("smallImgCon");
var smallImg = document.getElementById("smallImg");
var magnifierCon = document.getElementById("magnifierCon");
var magnifierBg = document.getElementById("magnifierBg");
var largeImg = document.getElementById("largeImg");

function getImageSize(imageEl) {
var i = new Image();
i.src = imageEl.src;
return new Array(i.width, i.height);
}

function imgZoomOut(event) {
magnifierCon.style.display = "block";
smallImgConLocationX = smallImgCon.offsetLeft;//得到小图片X坐标
smallImgConLocationY = smallImgCon.offsetTop;//得到小图片Y坐标

x = event.clientX - smallImgConLocationX;//光标相对小图片左上角X坐标
y = event.clientY - smallImgConLocationY;//光标相对小图片左上角Y坐标

var smallSize = getImageSize(smallImg);
smallImgWidth = smallSize[0];
smallImgHeight = smallSize[1];

var largeSize = getImageSize(largeImg);
largeImgWidth = largeSize[0];
largeImgHeight = largeSize[1];

var magnifierSize = getImageSize(magnifierBg);
magnifierWidth = magnifierSize[0];
magnifierHeight = magnifierSize[1];

if ( x < 0 || x > smallImgWidth || y < 0 || y > smallImgHeight) {
dispear();
}else {
magnifierCon.style.left = x - magnifierWidth/2 + "px";//放大镜X坐标
magnifierCon.style.top = y - magnifierHeight/2 + "px";//放大镜Y坐标

x = - x*(largeImgWidth/smallImgWidth) + magnifierWidth/2;
y = - y*(largeImgWidth/smallImgWidth) + magnifierHeight/2;

largeImg.style.left = x + "px";
largeImg.style.top = y + "px";

}

}
function dispear() {
magnifierCon.style.display = "none";
}
</script>
</body>
</html>

回复收藏 0

浮生未歇 2017-04-16 16:30:12

原理其实是显示一张与小图对应的大图，推荐使用jQuery的插件jQZoom，演示代码如下：

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqzoom</title>
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="http://www.mind-projects.it/projects/jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.mind-projects.it/projects/jqzoom/css/jquery.jqzoom.css" type="text/css">
<style type="text/css">
<!--
.jqzoom{
text-decoration:none;
float:left;
}
-->
</style>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false
});

});
</script><body>

<a href="http://www.mind-projects.it/projects/jqzoom/imgProd/triumph_big1.jpg" class="jqzoom" rel="gal1" title="triumph" >
<img src="http://www.mind-projects.it/projects/jqzoom/imgProd/triumph_small1.jpg"  title="triumph"  style="border: 4px solid  #666;" />
</a>

</body>
</html>

jQZoom 最新版：http://www.mind-projects.it/jqzoom_v10

回复收藏 0

泛泛之交 2017-02-28 17:23:38

我之前也是自己写过一个，使用jquery写的，代码我就不放出来了，都差不多，说下原理吧，我的小图片是一个<img>的定宽不定高的小图片（保持图片比例），大图片是原图，当做一个<div>的背景图片，然后在鼠标移动的时候出发mouseover事件，然后改变大图的background-position就可以了

回复收藏 0

~没有更多了~