首页 >> JavaScript教程 >> Js实例技巧 >> 图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]

图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]

2011-6-16 作者:lifeseato asp之家网友评论条投递文章

<!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></title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link type="image/x-icon" href="" rel="shortcut icon">
<script type="text/javascript">
function div(id){return document.getElementById(id);}
var ie=!-[1,];
var Obj={
	Create:function(id,id2,ele){
		var obj=document.createElement(ele);
		obj.setAttribute("id",id2);
		div(id).appendChild(obj);
		},
	del:function(id){
		var obj=div(id);
		obj.parentNode.removeChild(obj);
		},
	inner:function(id,text){
		div(id).innerHTML=text;
		},
	css:function(){
		this.cssinfo();
		var obj=div(this.css.id);
			with(obj.style){
			ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:"");
			this.css.background!=undefined?background=this.css.background:"";
			this.css.width!=undefined?width=this.css.width:"";
			this.css.height!=undefined?height=this.css.height:"";
			this.css.position!=undefined?position=this.css.position:"";
			this.css.left!=undefined?left=this.css.left:"";
			this.css.top!=undefined?top=this.css.top:"";
			this.css.padding!=undefined?padding=this.css.padding:"";
			this.css.margin!=undefined?margin=this.css.margin:"";
			this.css.filter!=undefined?filter=this.css.filter:"";
			this.css.opacity!=undefined?opacity=this.css.opacity:"";
			this.css.zIndex!=undefined?zIndex=this.css.zIndex:"";
			this.css.border!=undefined?border=this.css.border:"";
			this.css.overflow!=undefined?overflow=this.css.overflow:"";
			this.css.display!=undefined?display=this.css.display:"";
			this.css.textAlign!=undefined?textAlign=this.css.textAlign:"";
			this.css.fontSize!=undefined?fontSize=this.css.fontSize:"";
			this.css.color!=undefined?color=this.css.color:"";
			this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:"";
			this.css.cursor!=undefined?cursor=this.css.cursor:"";
			}
		},
	oEventX:function(e){
		var e=window.event?window.event:e;
		return e.clientX;
	},
	oEventY:function(e){
		var e=window.event?window.event:e;
		return e.clientY;
	}
}
var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY;
Obj.css.prototype.cssinfo=function(){
	this.css=css;
	return this;
}
</script>
<style>
*{margin:0;padding:0;font:12px/1.5em "宋体"}
.imgs{font-size:0;line-hegiht:0;}
.imgwrap{overflow:hidden;zoom:1;margin:100px;float:left;border:1px solid #e0e0e0;display:inline;overflow:hidden;}
.imgwrap .imgs{display:block;}
.imgwrap .imgs img{width:300px;}
</style>
</head>
<body id="body">
<div id="imgwrap" class="imgwrap">
<span class="imgs"><img src="HTTP://www.aspxhome.com/article/UploadPic/20116/16/50073_2010032209581612gcz-65.jpg" alt="测试图片" class="izoom" /></span>
</div>
<script>
function imgzoom(){
	var container="imgwrap"/*容器ID*/,imgload="img_loader"/*鼠标捕捉框ID*/,imgshow="img_shower"/*大图展示ID*/,showerL=320/*大图展示位置*/,showerT=0/*大图展示位置*/,navbug=200/*鼠标位置校正，当改变图片位置时候需要调整*/;
	var il_w=120,il_h=120,v=2.25/*捕捉框大小以及放大倍数*/;
	css={id:container,position:"relative",overflow:"visible",cursor:"crosshair"}
	new Obj.css;
	var imgs=div("imgwrap").getElementsByTagName("img");
	for(i=0;i<imgs.length;i++){
		if(imgs.className=="izoom");
		imgs[i].onmouseover=function(){Start(arguments[0],this)};
	}
	function Start(e,o){
		o.onmouseover="";
		Create(container,imgload,"div");
		Create(container,imgshow,"div");
		var image=new Image(),o2=div(imgload);
		image.src=o.src;
		var h=image.height,w=image.width;
		var h1=o.height,w1=o.width;
		var MouseX=oX(arguments[0]),MouseY=oY(arguments[0]),parentX=o.offsetWidth-o.style.border*2,parentY=o.offsetHeight;
		var img="<img src='"+image.src+"' style='width:"+o.width*v+"px;' id='objzoom' />";
		css={id:imgload,width:il_w+"px",height:il_h+"px",border:"1px solid #300",position:"absolute",background:"#fff",opacity:"0.3",filter:"alpha(opacity='30')"}
		new Obj.css;
		inner(imgshow,img);
		css={id:imgshow,width:il_w*v+"px",height:il_h*v+"px",position:"absolute",left:showerL+"px",top:showerT+"px",overflow:"hidden"}
		new Obj.css;
		css={id:"objzoom",position:"absolute"}
		new Obj.css;
		ie?o.attachEvent('onmouseover',MouseM):o.addEventListener('mouseover',MouseM,false);
		ie?o.attachEvent('onmousemove',MouseM):o.addEventListener('mousemove',MouseM,false);
		ie?o2.attachEvent('onmousemove',MouseM):o2.addEventListener('mousemove',MouseM,false);
		ie?o2.attachEvent('onmouseout',clearadd):o2.addEventListener('mouseout',clearadd,false);
		function MouseM(){
			var sizeX=(oX(arguments[0])-(il_w+2+navbug)/2),sizeY=(oY(arguments[0])-(il_h+2+navbug)/2);
			var vX=sizeX>=0?(sizeX+(il_w+2)/2<=parentX-(il_w+2)/2?sizeX:(parentX-(il_w+2))):0,vY=sizeY>=0?(sizeY+(il_h+2)/2<=parentY-(il_h+2)/2?sizeY:(parentY-(il_h+2))):0;
			css={id:imgload,left:vX+"px",top:vY+"px"}
			new Obj.css;
			css={id:"objzoom",left:-vX*v+"px",top:-vY*v+"px"}
			new Obj.css;
		}
		function clearadd(){
			setTimeout(clearall,10)
			function clearall(){
			del(imgshow);del(imgload);
			o.onmouseover=function(){Start(arguments[0],this)};
			}
		}
	}
}
imgzoom();
</script>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

感谢大家支持又做了个新的多图片放大效果~
顺便装饰了一下希望能用上

<!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></title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="image/x-icon" href="" rel="shortcut icon"> <script type="text/javascript"> function div(id){return document.getElementById(id);} var ie=!-[1,]; var Obj={ Create:function(id,id2,ele){ var obj=document.createElement(ele); obj.setAttribute("id",id2); div(id).appendChild(obj); }, del:function(id){ var obj=div(id); obj.parentNode.removeChild(obj); }, inner:function(id,text){ div(id).innerHTML=text; }, css:function(){ this.cssinfo(); var obj=div(this.css.id); with(obj.style){ ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:""); this.css.background!=undefined?background=this.css.background:""; this.css.width!=undefined?width=this.css.width:""; this.css.height!=undefined?height=this.css.height:""; this.css.position!=undefined?position=this.css.position:""; this.css.left!=undefined?left=this.css.left:""; this.css.top!=undefined?top=this.css.top:""; this.css.padding!=undefined?padding=this.css.padding:""; this.css.margin!=undefined?margin=this.css.margin:""; this.css.filter!=undefined?filter=this.css.filter:""; this.css.opacity!=undefined?opacity=this.css.opacity:""; this.css.zIndex!=undefined?zIndex=this.css.zIndex:""; this.css.border!=undefined?border=this.css.border:""; this.css.overflow!=undefined?overflow=this.css.overflow:""; this.css.display!=undefined?display=this.css.display:""; this.css.textAlign!=undefined?textAlign=this.css.textAlign:""; this.css.fontSize!=undefined?fontSize=this.css.fontSize:""; this.css.color!=undefined?color=this.css.color:""; this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:""; this.css.cursor!=undefined?cursor=this.css.cursor:""; } }, oEventX:function(e){ var e=window.event?window.event:e; return e.clientX; }, oEventY:function(e){ var e=window.event?window.event:e; return e.clientY; } } var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY; Obj.css.prototype.cssinfo=function(){ this.css=css; return this; } </script> <style> *{margin:0;padding:0;font:12px/1.5em "宋体"} body{background:#667594;padding:20px;overflow:hidden;} ul,li{list-style:none} body .bdl{border-left-style:dotted} body .bdr{border-right-style:dotted} .imgwrap{border:1px solid #e0e0e0;width:600px;height:600px;background:#fff;float:left;overflow:hidden} .images ul{overflow:hidden;zoom:1;} .images li{float:left;margin:40px 0 0 60px;border:1px solid #e0e0e0;line-height:0;font-size:0;cursor:crosshair;display:inline;height:240px;} .images img{width:200px} </style> </head> <body id="body"> <div class="imgwrap bdr" id="imgwrap"> <ul class="images"> <li><img src="HTTP://www.aspxhome.com/article/UploadPic/20116/16/zidian_s-32.gif" alt="图片1" /></li> <li><img src="http://www.aspxhome.com/images/logo.gif" alt="图片2" /></li> <li><img src="HTTP://www.aspxhome.com/article/UploadPic/20116/16/e09fe76372ce5cc4e6113a10-60.jpg" alt="图片3" /></li> <li><img src="HTTP://www.aspxhome.com/article/UploadPic/20116/16/319bcf18042b09974aedbc9c-69.jpg" alt="图片4" /></li> </ul> </div> <div class="imgwrap bdl" id="showwrap"></div> <script> function Info(e){ this.z=10; this.wrap="body"; this.show="showwrap"; this.c="imgwrap"; this.nc="newcontainer"; this.em="eventmouse"; this.ew="50"; this.eh="50"; this.obj=e; this.bugL=21; this.bugT=21; this.sT=document.documentElement.scrollTop; div(this.em)?del(this.em):false; div(this.nc)?del(this.nc):false; } Info.prototype.Scope=function(){ Create(this.wrap,this.em,"div"); Create(this.show,this.nc,"div"); var M=div(this.em),S=div(this.nc); var Top=this.obj.offsetTop,Left=this.obj.offsetLeft,Width=this.obj.offsetWidth,Height=this.obj.offsetHeight; this.minTop=Top; this.minLeft=Left; this.maxLeft=Left+Width-2-this.ew; this.maxTop=Top+Height-2-this.eh; if(ie){this.minLeft+=this.bugL;this.maxLeft+=this.bugL;this.minTop+=this.bugT;this.maxTop+=this.bugT} } Info.prototype.Move=function(){ var eLeft=oX(arguments[0])-this.ew/2,eTop=oY(arguments[0])-this.eh/2; var Left=eLeft<this.minLeft?this.minLeft:(eLeft>this.maxLeft?this.maxLeft:eLeft),Top=eTop<this.minTop?this.minTop:(eTop>this.maxTop?this.maxTop:eTop); css={id:this.em,width:this.ew+"px",height:this.eh+"px",left:Left+"px",top:Top+"px",position:"absolute",display:"block",border:"1px solid #e0e0e0",cursor:"crosshair"} new Obj.css; css={id:this.nc,width:this.ew*z+"px",height:this.eh*z+"px",position:"relative",zIndex:999,border:"1px solid #e0e0e0",overflow:"hidden",margin:"50% auto 0 auto",top:-this.eh*z/2+"px"} new Obj.css; var imgLeft=Left-this.obj.offsetLeft,imgTop=Top-this.obj.offsetTop; var image=new Image(),obj=this.obj.children[0],nc=div(this.nc); image.src=obj.src; image.width=obj.offsetWidth; nc.innerHTML="<img src='"+image.src+"' id='new_img' style='width:"+image.width*z+"px;' />"; css={id:"new_img",position:"absolute",top:-imgTop*z+"px",left:-imgLeft*z+"px"} new Obj.css; } function ZoomStart(e){ Info.call(this); var Zoom=new Info(e); Zoom.Scope(); Zoom.Move(arguments[1]); var M=div(this.em),S=div(this.nc); M.onmousemove=function(){Zoom.Move(arguments[0]);}; e.onmousemove=function(){Zoom.Move(arguments[0]);}; M.onmouseout=End; function End(){ del(M.id); del(S.id); } } var obj=div("imgwrap"),zImgs=obj.getElementsByTagName("li"); for(var i=0;i<zImgs.length;i++){ zImgs[i].onmouseover=function(){ZoomStart(this,arguments[0])} } </script> </body> </html> [提示：你可先修改部分代码，再按运行]

Tags：图片放大放大

上一篇：30个最常用css选择器解析下一篇：YUI3.3.0 中 transition 事件的变化

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

图片放大镜，多图片放大（已更新）[可调整倍数、区域大小、展示区域位置]

学习Asp到Asp之家（Aspxhome.com）