|
<!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.cwydesign.com/effects/UploadFiles_7074/201009/2010091011353879.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> |
注册 登录
