Javascript教程_图片放大效果[可调整倍数、区域大_H5之家

Javascript教程_图片放大效果[可调整倍数、区域大小、展示区域位置]源码教程

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><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;}
.imgwrap .imgs{display:block;}
.imgwrap .imgs img{width:300px;}
</style>
</head>
<body id="body">
<div id="imgwrap" class="imgwrap">
<span class="imgs"><img src="" 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+"' />";
  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>