教程集 > 脚本编程 > javascript > 正文 JavaScript图片放大效果代码

JavaScript图片放大效果代码

发布时间：2023-06-07 编辑：jiaochengji.com

教程集为您提供JavaScript图片放大效果代码等资源，欢迎您收藏本站，我们将为您提供最新的JavaScript图片放大效果代码资源

提示：您可以先修改部分代码再运行

<!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>Magnifier</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 alt="JavaScript图片放大效果代码"  src="http://p1.jquerycn.cn/111cn/9/0/1474575463_5285.jpg" id="img" />  <div id="Browser"></div>  </div>  <div id="mag"><img  alt="JavaScript图片放大效果代码"  id="magnifierImg" /></div>  <select style="position:absolute;top:200px;left:650px;width:100px;">  <option>select测试</option>  <option>是否能覆盖</option>  </select>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript 实现图片放大缩小代码
 jQuery实现等比例缩放大图片让大图片自适应页面布局
 jQuery实现图片放大预览实现原理及代码
 jQuery图片放大插件 hoverpluse
jQuery图片放大镜插件 magnifier
一个随机显示图片的JS代码
 js实现鼠标滑到图片上则产生放大浮出的效果
 JavaScript图片放大镜的简单代码
 jquery 实现京东商城、凡客商城的图片放大效果
 分享精心挑选的23款美轮美奂的jQuery 图片特效插件

上一篇：js 控制完美select下拉选框代码

[关闭]

JavaScript图片放大效果代码

最近更新

浏览排行