js实现图片局部放大

最新推荐文章于 2023-03-16 13:28:30 发布

风云正

最新推荐文章于 2023-03-16 13:28:30 发布

阅读量1.7k

点赞数

分类专栏： IT应用文章标签：图片局部放大

本文链接：https://blog.csdn.net/chenzheng8975/article/details/84472013

版权

IT应用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'enlargeImg.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<style type="text/css">
#magnifier {
	width: 342px;
	height: 420px;
	position: absolute;
	top: 100px;
	left: 250px;
	font-size: 0;
	border: 1px solid #000;
}

#img {
	width: 342px;
	height: 420px;
}

#Browser {
	border: 1px solid #000;
	z-index: 100;
	position: absolute;
	background: #555;
}

#mag {
	border: 1px solid #000;
	overflow: hidden;
	z-index: 100;
}
</style>
		<script type="text/javascript">
	function getEventObject(W3CEvent) { //事件标准化函数
		return W3CEvent || window.event;
	}
	function getPointerPosition(e) { //兼容浏览器的鼠标x,y获得函数
		e = e || getEventObject(e);
		var x = e.pageX
				|| (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
		var y = e.pageY
				|| (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

		return {
			'x' : x,
			'y' : y
		};
	}
	function setOpacity(elem, level) { //兼容浏览器设置透明值
		if (elem.filters) {
			elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
		} else {
			elem.style.opacity = level;
		}
	}
	function css(elem, prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值
		for ( var i in prop) {
			if (i == 'opacity') {
				setOpacity(elem, prop[i]);
			} else {
				elem.style[i] = prop[i];
			}
		}
		return elem;
	}
	var magnifier = {
		m : null,

		init : function(magni) {
			var m = this.m = magni || {
				cont : null, //装载原始图像的div
				img : null, //放大的图像
				mag : null, //放大框
				scale : 15
			//比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
					}

			css(m.img, {
				'position' : 'absolute',
				'width' : (m.cont.clientWidth * m.scale) + 'px', //原始图像的宽*比例值 
				'height' : (m.cont.clientHeight * m.scale) + 'px' //原始图像的高*比例值
			})

			css(m.mag, {
				'display' : 'none',
				'width' : m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽
				'height' : m.cont.clientHeight + 'px',
				'position' : 'absolute',
				'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px', //放大框的位置为原始图像的右方远10px
				'top' : m.cont.offsetTop + 'px'
			})

			var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth
					- m.cont.getElementsByTagName('div')[0].clientWidth; //获取border的宽

			css(m.cont.getElementsByTagName('div')[0], { //m.cont.getElementsByTagName('div')[0]为浏览框
						'display' : 'none', //开始设置为不可见
						'width' : m.cont.clientWidth / m.scale - borderWid
								+ 'px', //原始图片的宽/比例值 - border的宽度
						'height' : m.cont.clientHeight / m.scale - borderWid
								+ 'px', //原始图片的高/比例值 - border的宽度
						'opacity' : 0.5
					//设置透明度
					})

			m.img.src = m.cont.getElementsByTagName('img')[0].src; //让原始图像的src值给予放大图像
			m.cont.style.cursor = 'crosshair';

			m.cont.onmouseover = magnifier.start;

		},

		start : function(e) {

			if (document.all) { //只在IE下执行,主要避免IE6的select无法覆盖
			magnifier.createIframe(magnifier.m.img);
		}

		this.onmousemove = magnifier.move; //this指向m.cont
		this.onmouseout = magnifier.end;
	},

	move : function(e) {
		var pos = getPointerPosition(e); //事件标准化

		this.getElementsByTagName('div')[0].style.display = '';

		css(
				this.getElementsByTagName('div')[0],
				{
					'top' : Math
							.min(
									Math
											.max(
													pos.y
															- this.offsetTop
															- parseInt(this
																	.getElementsByTagName('div')[0].style.height)
															/ 2, 0),
									this.clientHeight
											- this.getElementsByTagName('div')[0].offsetHeight) + 'px',
					'left' : Math
							.min(
									Math
											.max(
													pos.x
															- this.offsetLeft
															- parseInt(this
																	.getElementsByTagName('div')[0].style.width)
															/ 2, 0),
									this.clientWidth
											- this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
				})

		magnifier.m.mag.style.display = '';

		css(
				magnifier.m.img,
				{
					'top' : -(parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
					'left' : -(parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
				})

	},

	end : function(e) {
		this.getElementsByTagName('div')[0].style.display = 'none';
		magnifier.removeIframe(magnifier.m.img); //销毁iframe

		magnifier.m.mag.style.display = 'none';
	},

	createIframe : function(elem) {
		var layer = document.createElement('iframe');
		layer.tabIndex = '-1';
		layer.src = 'javascript:false;';
		elem.parentNode.appendChild(layer);

		layer.style.width = elem.offsetWidth + 'px';
		layer.style.height = elem.offsetHeight + 'px';
	},

	removeIframe : function(elem) {
		var layers = elem.parentNode.getElementsByTagName('iframe');
		while (layers.length > 0) {
			layers[0].parentNode.removeChild(layers[0]);
		}
	}
	}
	window.onload = function() {
		magnifier.init( {
			cont : document.getElementById('magnifier'),
			img : document.getElementById('magnifierImg'),
			mag : document.getElementById('mag'),
			scale : 3
		});
	}
</script>

	</head>

	<body>
		<div id="magnifier">
			<img src="http://pic14.nipic.com/20110613/472580_115212669185_2.jpg"
				id="img" />
			<div id="Browser"></div>
		</div>
		<div id="mag">
			<img id="magnifierImg" />
		</div>
	</body>
</html>

风云正

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现图片局部放大

&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName...
复制链接

扫一扫