<!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>【荐】JavaScript图片放大技术（放大镜）示例代码 - www.webdm.cn</title>

<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://www.webdm.cn/images/20091107/fangda.jpg" id="img" />

<div id="Browser"></div>

</div>

<div id="mag"><img id="magnifierImg" /></div>

<select style="position:absolute;top:200px;left:650px;width:100px;">

<option>select测试</option>

<option>是否能覆盖</option>

</select>

</body>

</html>

　　

【荐】JavaScript图片放大技术（放大镜）示例代码的更多相关文章

  1. Tips:javascript 图片放大和取得尺寸

    1)获取图片尺寸 <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt=&q ...

  2. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  3. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  4. [半原创]指纹识别+谷歌图片识别技术之C++代码

    原地址:http://blog.csdn.net/guoming0000/article/details/8138223 以前看到一个http://topic.csdn.net/u/20120417/ ...

  5. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...

  7. js图片放大镜特效代码

    <script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var b ...

  8. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  9. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

随机推荐

  1. UI中列表

    1.ul.ol.dl

  2. python中eval()

    eval()执行简单的python代码(个人感觉像是执行表达式)

  3. Python3 学习笔记之 数据类型

  4. 第24课 - #pragma 使用分析

    第24课 - #pragma 使用分析 1. #pragma简介 (1)#pragma 是一条预处理器指令 (2)#pragma 指令比较依赖于具体的编译器,在不同的编译器之间不具有可移植性,表现为两 ...

  5. flutter权限管理permission_handler

    flutter权限管理permission_handler 添加依赖 #权限 permission_handler: ^3.0.0 使用 在android的mainfest中添加权限: <use ...

  6. java安全编码指南之:输入校验

    目录 简介 在字符串标准化之后进行校验 注意不可信字符串的格式化 小心使用Runtime.exec() 正则表达式的匹配 简介 为了保证java程序的安全,任何外部用户的输入我们都认为是可能有恶意攻击 ...

  7. vue +signalR

    概述:ASP.NET Core SignalR是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立即将内容推送到客户端. 这玩意的概念我就不多讲 ...

  8. redis 的基本使用

    Linux上查看redis是否运行 ps -ef | grep redis  还能查看到Linux的安装路径. set  rediskey  redisvalue  在redis里面存储了一个名称为r ...

  9. Linux常用字段

    cd 切换路径 vim,vi 打开文档 ls  查看文件信息 chmod 修改文件或目录的权限 useradd 添加用户 cat 查看纯文本文件(少内容) rm 删除文件或目录 mv 剪切文件或文件重 ...

  10. Linux 虚拟机绑定静态 IP

    环境介绍 Machine: NUC8i5BEK OS: macOS Catalina 10.15.6 VirtualBox: 6.1.12 r139181 (Qt5.6.3) CentOS: 8.2. ...