/thread-2812683-1-1.html
/thread-2814846-1-1.html
应用效果
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<html>
<head>
<title>JavascriptImageszoom-outviewsample.Broughttoyouby斩梦人.天天
QQ:2206</title>
<scriptlanguage="JavaScript">
<!--
vardshowW=450;//默认预览图宽度(可由小图的showW,showH动态指定)
vardshowH=300;//默认预览图高度
varbborder=1;//大图边框
varsborder=1;//小图边框
varvborder=1;//小预览图边框
varbigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大图,小图,预览窗,小预览窗
varnview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.onload=functioninit(){
isIE=window.event?1:0;
picshow.style.borderWidth=bborder;
picshow.style.width=dshowW;
picshow.style.height=dshowH;
bpic.style.display="";
abox=document.body.getElementsByTagName("div");//初始化所有小图
for(n=0;n<abox.length;n++)
if(abox[n].className=="picbox"){
varo=abox[n];
varview=getview(o);
varimg=getimg(o);
view.style.borderWidth=vborder;
o.style.borderWidth=sborder;
o.style.width=img.width+sborder*2*isIE;
o.style.height=img.height+sborder*2*isIE;
o.setAttribute("pid",n);//小图标记,主键唯一
if(o.getAttribute("show")=="show")loadpic(o);
o.onmouseout=function(){setTimeout(nview.style.visibility='hidden');}
}
}
//载入图片
functionloadpic(o){
varview=getview(o);
varimg=getimg(o);
bpic.style.display="none";
nview=view;//标记活动小预览窗
nflag=o.getAttribute("pid");//当前图片标记,用来判断切换图片
//改变预览窗大小
if(img.getAttribute("showW")!=null)showW=parseInt(img.getAttribute("showW"));
elseshowW=dshowW;
if(img.getAttribute("showH")!=null)showH=parseInt(img.getAttribute("showH"));
elseshowH=dshowH;
picshow.style.width=showW+isIE*bborder*2;
picshow.style.height=showH+isIE*bborder*2;
loading.style.marginTop=(showH-loading.offsetHeight)/2;
if(img.getAttribute("dLeft"))bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
if(img.getAttribute("dTop"))bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
picstatus="loading";
tempo=o;
bpic.src=img.lowsrc;
}
//图片载入完成
functionloaddone(o){
bpic.style.display="block";
varview=getview(o);
varimg=getimg(o);
smallW=img.width;//改变小图,小预览窗大小
smallH=img.height;
bigW=bpic.width;
bigH=bpic.height;
if(showW>bigW){//如果预览图比大图大,则等于大图
showW=bigW;
picshow.style.width=showW+isIE*bborder*2;
}
if(showH>bigH){
showH=bigH;
picshow.style.height=showH+isIE*bborder*2;
}
zoomX=bigW/smallW;
zoomY=bigH/smallH;
viewW=showW*smallW/bigW;
viewH=showH*smallH/bigH;
nview.style.width=viewW-vborder*2*!isIE;
nview.style.height=viewH-vborder*2*!isIE;
nview.style.display="block";
img.style.top=-nview.offsetHeight;
if(!nview.style.left)nview.style.left=0;
if(!nview.style.top)nview.style.top=0;
picstatus="done"
}
//移动事件
functionmove(e,o,flag){//flag,对象来源标记,FF下view的定位需要
o=isIE?o.parentElement:o.parentNode;
if(o.getAttribute("pid")!=nflag){//判断是否切换了图片
nview.style.visibility="hidden";
loadpic(o);//载入新图片
}
if(picstatus="done"){//如果大图载入完毕
if(nview.style.visibility="hidden")nview.style.visibility="visible";
vare=isIE?window.event:e;
if(isIE==0){//分别获取FF或IE的view位置
if(flag==1){//由于o的来源不同,使用不同的算法定位
vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
}else{
vX=e.layerX-nview.offsetWidth/2-vborder;
vY=e.layerY-nview.offsetHeight/2-vborder;
}
}
else{
vX=e.offsetX-nview.offsetWidth/2;
vY=e.offsetY-nview.offsetHeight/2;
}
if(vX<0)vX=0;//边界判断,不能超出缩略图的范围
if(vY<0)vY=0;
if(vX>smallW-viewW){vX=smallW-viewW;mX=bigW-showW}else{mX=vX*zoomX;}
if(vY>smallH-viewH){vY=smallH-viewH;mY=bigH-showH}else{mY=vY*zoomY;}
nview.style.left=vX;
nview.style.top=vY;
bpic.style.marginLeft=-mX;//刷新预览窗口
bpic.style.marginTop=-mY;
}
}
//得到view
functiongetview(o){
vararr=o.getElementsByTagName("div");
varn;
for(n=0;n<arr.length;n++)
if(arr[n].className="view")returnarr[n];
}
//得到img
functiongetimg(o){
vararr=o.getElementsByTagName("img");
varn;
for(n=0;n<arr.length;n++)
if(arr[n].className="spic")returnarr[n];
}
//-->
</script>
<styletype="text/css">
<!--
*{}{padding:0;margin:0}
body{}{color:white;background:black;font:bold12px/18pxtahoma;color:white;}
#picshow{}{border:1pxredsolid;width:200;height:150;overflow:hidden;margin:0auto}/**//*width,height随便定义,为了第一次显示时能看见loading*/
#bpic{}{display:none}
#loading{}{font:bold22px/30pxtahoma;color:white;}
#loadingimg{}{vertical-align:middle;position:relative}
#loading.text{}{font:bold12px/20pxtahoma;color:white;}
.picbox{}{border:1pxgreendashed;overflow:hidden;float:left;width:0;height:0;text-align:left}/**//*注意:overflow:hidden;text-align:left不可更改,如果在IE的表格中定位会出问题*/
.spic{}{position:relative;}/**//*position:relative不可更改*/
.view{}{border:1pxsilversolid;z-index:100;font-size:1px;position:relative;visibility:hidden;display:none}/**//*position:relative;visibility:hidden;display:none不可更改*/
td{}{text-align:center;height:60px;font-size:30px;margin:0auto}
//-->
</style>
</head>
<body>
Sometexthere<br>ok.|您需要做的仅仅是加入picshow块和picbox块,设置必要参数,剩下的就让JS去做吧!(移到小图上看更多说明)
<tablecellpadding="0"cellspacing="0"border="2"width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<tdwidth="520"align="center">
<divid="picshow">
<imgid="bpic"onload="loaddone(tempo)"/>
<divid="loading">
<imgsrc="/images/loading.gif"border="0"/>Loading
<divclass="text">Pleasewait<br><br><br></div>
</div>
</div>
</td>
<td>
<divclass="picbox"show="show"><!--设置show显示默认图片-->
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b1.jpg"src="/images/s1.jpg"onmousemove="move(event,this,0)"dLeft="700"dTop="300"title="设置标签属性show='show'显示默认图片,设置dLeft,dTop定义默认偏移量"/><!--src:小图,lowsrc:大图,showW/showH:可设置预览窗大小-->
</div>
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b2.jpg"src="/images/s2.jpg"onmousemove="move(event,this,0)"showW="200"showH="200"title="可自定义预览图大小"/>
</div>
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b4.jpg"src="/images/s4.jpg"width="302"onmousemove="move(event,this,0)"title="小图可以按比例放大"/><!--这里可以重新设置小图大小,尽量与大图比例保持一致-->
</div>
</td>
<td>Intable
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b3.jpg"src="/images/s3.jpg"width="60"onmousemove="move(event,this,0)"title="也可以按比例缩小"/>
</div>
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b3.jpg"src="/images/s3.jpg"onmousemove="move(event,this,0)"showW="500"showH="200"title="可以嵌套在table中"/>
</div>
</td>
</tr>
</table>
Outoftable
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b2.jpg"src="/images/s2.jpg"onmousemove="move(event,this,0)"title="放在table外面也没有问题"/>
</div>
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/s4.jpg"src="/images/s4.jpg"onmousemove="move(event,this,0)"showW="1000"showH="1000"title="showW='1000'showH='1000',如果指定预览图比原图大,则使用原图大小"/>
</div>
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b5.jpg"src="/images/s5.jpg"onmousemove="move(event,this,0)"showW="160"showH="320"title="代码较上一版本健壮,能在IE,FF下稳定工作,基本支持OP,欢迎大家帮助测试!"/>
</div>
<divclass="picbox">
<divclass="view"onmousemove="if(!isIE)move(event,this,1)"></div>
<imgclass="spic"lowsrc="/images/b5.jpg"src="/images/s5.jpg"onmousemove="move(event,this,0)"width="500"height="112"title="即使没有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>
