小图弹大图Js图片展示一例

功能:ie6 ie7 Firefox2 Safari3.11 Opera9已测
1 点击小图弹出大图,虚化周围背景,自适应图片大小;
2 如果弹出大图可以,双击可以全景和实际尺寸间切换;
3 超出浏览器显示的大图会出现滚动条,同时也可以用鼠标拖动大图;
4 随鼠标动作出现的关闭按钮,鼠标不动作则自动隐藏;
其它:右击图片关闭,双击背景关闭.
暇僻:弹出大图后有滚动条全和浏览器滚动条同时存在,大家给点UE建议,进一步完善.
这里只做大概展示,原应用地址:http://sharechn.com/HotNews/512/qingchuan.htm 给点美工上的意见,本人附耳恭听....
<!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>小图弹大图Js图片展示一例(ie ff sf op已测)-artwc.com</title>
  <link rel="stylesheet" type="text/css" href="http://sharechn.com/css/share.css" />
  <link rel="stylesheet" type="text/css" href="http://sharechn.com/css/lower.css" />
  <link rel="stylesheet" type="text/css" href="http://sharechn.com/css/qinchuan.css" />
</head>
<body>
<div class="layout auto wenchua" id="wenchuan"><div>
<img src="http://sharechn.com/HotNews/512/wenchuan/512_0a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_1a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_2a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_3a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_4a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_5a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_6a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_7a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_8a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_9a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_10a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_11a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_12a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_13a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_14a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_15a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_16a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_95a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_96a.jpg" />
<img src="http://sharechn.com/HotNews/512/wenchuan/512_99a.jpg" />
</div></div>
<script type="text/javascript">
function ImgShow(evt){
var imgTag=(window.event)?event.srcElement:evt.target;
var imgPath=imgTag.src.replace("a.jpg",".jpg");//取得弹出的大图url
var tagTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
var tag=document.createElement("div");
tag.style.cssText="width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight)+"px;position:absolute;background:white;top:0;filter: Alpha(Opacity=80);Opacity:0.8;";
tag.title="双击此空白关闭图像";
tag.ondblclick=closes;
var tagImg=document.createElement("div");
tagImg.style.cssText="font:12px /14px simsun;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid gray;background:gray;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tagTop)+"px;"
tagImg.innerHTML="<img src='http://sharechn.com/img/load.gif' /><br /><b class='F14 L24'>请稍等,正在载入图片...</b><br /><span class='yellow'>双击空白区域可以关闭图像载入</span>";
var closeTag=document.createElement("div");
closeTag.style.cssText="display:none;position:absolute;background:red;border:1px solid white;yellow:white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;";
closeTag.innerHTML="<b>&nbsp;关闭&nbsp;</b>"
closeTag.onclick=closes;
document.body.appendChild(tag);
document.body.appendChild(tagImg);
var img=new Image();
img.src=imgPath;
img.style.cssText="border:1px solid white;";
img.oncontextmenu=function(){closes();return false}
var barShow,barSeep=2000;//closeTag hidden time
img.complete?ImgOK():img.onload=ImgOK;
function ImgOK(){
var Stop1=false,Stop2=false,temp=0;
var tx=tagImg.offsetWidth,ty=tagImg.offsetHeight;
var ix=img.width,iy=img.height;
var sx=document.documentElement.clientWidth,sy=Math.min(document.documentElement.clientHeight,document.body.clientHeight/*opera*/);
var xx=ix>sx?sx-50:ix+4,yy=iy>sy?sy-50:iy+3;
var maxTime=setInterval(function(){
temp+=50;
if((tx+temp)<xx){
tagImg.style.width=(tx+temp)+"px";
tagImg.style.left=(sx-(tx+temp))/2+"px";
}else{
Stop1=true;
tagImg.style.width=xx+"px";
tagImg.style.left=(sx-xx)/2+"px";
}
if((ty+temp)<yy){
tagImg.style.height=(ty+temp)+"px";
tagImg.style.top=(tagTop+((sy-(ty+temp))/2))+"px";
}else{
Stop2=true;
tagImg.style.height=yy+"px";
tagImg.style.top=(tagTop+((sy-yy)/2))+"px";
}
if(Stop1&&Stop2) clearInterval(maxTime);
},1);
tagImg.innerHTML="";
tagImg.appendChild(closeTag);
tagImg.appendChild(img);
if(ix>xx||iy>yy){
img.alt="左键拖动,右键关闭,双击放大缩小";
img.ondblclick=function (){
if(tagImg.offsetWidth<img.offsetWidth||tagImg.offsetHeight<img.offsetHeight){
img.style.width="auto";
img.style.height="100%";
img.alt="双击可以放大";
tagImg.style.overflow="visible";
tagImg.style.width=img.offsetWidth+"px";
tagImg.style.left=((sx-img.offsetWidth)/2)+"px";
}else{
img.style.width=ix+"px";
img.style.height=iy+"px";
img.alt="双击可以缩小";
tagImg.style.overflow="auto";
tagImg.style.width=xx+"px";
tagImg.style.left=((sx-xx)/2)+"px";
}
}
img.onmousedown=function(a){
//img.setCapture?img.setCapture():window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
img.style.cursor="pointer";
var evts=a||window.event;
var onx=evts.clientX,ony=evts.clientY;
var sox=tagImg.scrollLeft,soy=tagImg.scrollTop;
var sow=img.width+2-tagImg.clientWidth,soh=img.height+2-tagImg.clientHeight;
document.onmousemove=function(e){
var evt=e||window.event;
var xx=evt.clientX,yy=evt.clientY;
tagImg.scrollTop=soy-(yy-ony)<0?"0":soy-(yy-ony)>soh?soh:soy-(yy-ony);
tagImg.scrollLeft=sox-(xx-onx)<0?"0":sox-(xx-onx)>sow?sow:sox-(xx-onx);
return false;
}
return false;
}
tagImg.onmousemove=function(){
closeTag.style.top=(tagImg.scrollTop+10)+"px";
closeTag.style.left=(tagImg.scrollLeft+10)+"px";
barHidden();
}
document.onmouseup=moveStop; tagImg.onmouseout=moveStop;
//img.onmouseup=function(){darg=false;img.style.cursor="default";img.releaseCapture?img.releaseCapture():window.releaseEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);}
}else{
tagImg.style.overflow="visible";
tagImg.onmousemove=barHidden;
}
}
function barHidden(){
clearTimeout(barShow);
closeTag.style.display="block";
barShow=setTimeout(function(){closeTag.style.display="none";},barSeep);
}
function closes(){
document.body.removeChild(tag);
document.body.removeChild(tagImg);
}
function moveStop(){
document.onmousemove=null;
img.style.cursor="default";
}
}
</script>
<script type="text/javascript">//实例化
var imgList1=document.getElementById("xwxc").getElementsByTagName("img");
var imgList3=document.getElementById("wenchuan").getElementsByTagName("img");
for(var i in imgList1){
imgList1[i].onclick=ImgShow;
}
for(var i in imgList3){
imgList3[i].onclick=ImgShow;
}
</script>
</body>
</html>
使用方法(本例)小图url:http://..../img/xxxxa.jpg,大图url:http://..../img/xxxx.jpg,小图的url只比大图多了一个a,如果用正则很容易取到大图url;我在相应地方做了注解,少加修改即可..