 |
热门文章 |
|
|
|
|
| 图片放大镜效果—多张图片 |
| 来源：蓝色理想 更新时间：2010/9/10 11:43:27 阅读次数： 我要投稿 |
|
<!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.cwydesign.com/effects/UploadFiles_7074/201009/2010091011353879.jpg" alt="图片1" /></li>
<li><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/2010091011353879.jpg" alt="图片2" /></li>
<li><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/2010091011353879.jpg" alt="图片3" /></li>
<li><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/2010091011353879.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> |
|
| 上一篇文章： 图片放大镜效果—单张图片下一篇文章： 可控制图片放大缩小还原移动效果的JS网页图片查看器 |
|
|
|
注册 登录
