一个实用的小图弹大图的js图片展示效果

作者：佚名来源：互联网文章点击数：

好久没来看了最近做了一个小图弹大图的js图片展示效果,请大家观摩....
功能:ie6 ie7 Firefox2 Safari3.11 Opera9已测
1 点击小图弹出大图,虚化周围背景,自适应图片大小;
2 如果弹出大图可以,双击可以全景和实际尺寸间切换;
3 超出浏览器显示的大图会出现滚动条,同时也可以用鼠标拖动大图;
4 随鼠标动作出现的关闭按钮,鼠标不动作则自动隐藏;
其它:右击图片关闭,双击背景关闭.
暇僻:弹出大图后有滚动条全和浏览器滚动条同时存在,大家给点UE建议,进一步完善.

<!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="room layout" id="xwxc">
<p>五月二十二日成立,到目前为止，高炮团抽调四位官兵照顾孩子们的生活学习，包括两位高中毕业生，两位硕士，另派专门炊事员。<br /><b class="white">该学校现在急需教师，特别是女教师。</b>最近一段时间，新村准备接待从青川县关庄镇、红光乡,凉水镇苏河乡和马公乡送来的孤儿们。</p>
<img src="/Upfiles/BeyondPic/2008-06/20086205844753692.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205844753692.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207885890625.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207885890625.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086200052629933.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086200052629933.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207486077637.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207486077637.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202639580854.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202639580854.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206320234232.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206320234232.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201503390499.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201503390499.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206188919115.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206188919115.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207806019823.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207806019823.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208250259766.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208250259766.jpg" />
<div class="roombot"></div>
</div>
<div class="layout auto wenchua" id="wenchuan"><div>
<img src="/Upfiles/BeyondPic/2008-06/20086209962294065.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209962294065.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207194426461.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207194426461.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208979992336.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208979992336.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209323131379.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209323131379.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204834909608.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204834909608.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202418311607.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202418311607.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203135412306.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203135412306.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204917363311.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204917363311.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208427131731.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208427131731.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206088612063.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206088612063.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206290022614.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206290022614.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207644261557.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207644261557.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201582841049.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201582841049.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209076153048.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209076153048.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202691137469.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202691137469.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203045376301.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203045376301.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206758370929.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206758370929.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203804151293.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203804151293.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086205184228216.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205184228216.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206547920396.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206547920396.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201401893942.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201401893942.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208407539574.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208407539574.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206703612377.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206703612377.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086200579889125.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086200579889125.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207989078010.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207989078010.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202135437729.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202135437729.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203844085282.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203844085282.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204206787361.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204206787361.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209732023220.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209732023220.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206391967799.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206391967799.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204924742555.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204924742555.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086205387344744.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205387344744.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086200989759826.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086200989759826.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208558693395.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208558693395.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209267340858.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209267340858.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086200620942947.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086200620942947.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086205056288896.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205056288896.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204522096977.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204522096977.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203818179770.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203818179770.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204270871869.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204270871869.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209883186042.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209883186042.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206779822573.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206779822573.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207598470035.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207598470035.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208941172225.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208941172225.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203949616911.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203949616911.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201508640480.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201508640480.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209904623283.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209904623283.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209459441661.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209459441661.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203961756743.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203961756743.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086200395114438.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086200395114438.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208681187230.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208681187230.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202466453089.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202466453089.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208455997886.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208455997886.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203601357585.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203601357585.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204420904047.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204420904047.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202721683503.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202721683503.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207804849770.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207804849770.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086205465220092.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205465220092.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203779856932.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203779856932.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207560401311.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207560401311.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209590106091.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209590106091.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203403427899.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203403427899.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204120537598.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204120537598.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202431216954.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202431216954.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207606819974.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207606819974.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203368989731.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203368989731.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202250171148.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202250171148.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204602873337.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204602873337.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206207314708.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206207314708.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207919587130.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207919587130.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206821250980.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206821250980.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208846240907.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208846240907.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086200139926389.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086200139926389.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206554821837.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206554821837.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086205421645614.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205421645614.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204305622917.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204305622917.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207672441325.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207672441325.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086204096809010.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086204096809010.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201352267522.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201352267522.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202142660884.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202142660884.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086205746001255.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086205746001255.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206279150494.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206279150494.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208568558940.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208568558940.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207115823271.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207115823271.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086202103457968.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086202103457968.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208965517725.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208965517725.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086207833888465.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086207833888465.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201609055214.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201609055214.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203068900910.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203068900910.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208887667556.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208887667556.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209506215019.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209506215019.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209066401026.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209066401026.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086201006016706.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086201006016706.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086209339886966.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086209339886966.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208634311815.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208634311815.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086206945190371.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086206945190371.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086208977233815.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086208977233815.jpg" />
<img src="/Upfiles/BeyondPic/2008-06/20086203981483265.jpg" _fcksavedurl="/Upfiles/BeyondPic/2008-06/20086203981483265.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.ondblclick=function(){var clsOK=confirm("确定要取消图片显示吗?"); if(clsOK){closes();}};
   var tagImg=document.createElement("div");
    tagImg.style.cssText="font:12px /18px verdana;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="<div style='padding:10px;background:#cccccc;border:1px solid white'><img src='http://bbs.blueidea.com/attachment.php?aid=91156&noupdate=yes' /><br /><br /><b style='color:#999999;font-weight:normal'>Image loading...</b><br /></div>";
   var closeTag=document.createElement("div");
    closeTag.style.cssText="display:none;position:absolute;left:10px;top:10px;background:red;border:1px solid white;yellow:white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;";
    closeTag.innerHTML="<b> 关闭 </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 #cccccc;filter: Alpha(Opacity=0);Opacity:0;";
    tagImg.oncontextmenu=function(){var clsOK=confirm("确定要取消图片显示吗?"); if(clsOK){closes();};return false};
   var barShow,imgTime;
   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+=35;
     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);
      tagImg.appendChild(img);
      temp=0;
      imgOPacity();
     }
    },1);
    function imgOPacity(){
     temp+=10;
     img.style.filter="alpha(opacity="+temp+")";
     img.style.opacity=temp/100;
     imgTime=setTimeout(imgOPacity,1)
     if(temp>100) clearTimeout(imgTime);
    }
    tagImg.innerHTML="";
    tagImg.appendChild(closeTag);
    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="双击可以放大";
       img.onmousedown=null;
       closeTag.style.top="10px";
       closeTag.style.left="10px";
       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="双击可以缩小";
       img.onmousedown=dragDown;
       tagImg.style.overflow="auto";
       tagImg.style.width=xx+"px";
       tagImg.style.left=((sx-xx)/2)+"px";
      }
     }
     img.onmousedown=dragDown;
     tagImg.onmousemove=barHidden;
     tagImg.onmouseout=moveStop;
     document.onmouseup=moveStop;
    }else{
     tagImg.style.overflow="visible";
     tagImg.onmousemove=barHidden;
    }
   }
   function dragDown(a){
    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;
    var xxleft,yytop;
    document.onmousemove=function(e){
     var evt=e||window.event;
     xxleft=sox-(evt.clientX-onx)<0?"0":sox-(evt.clientX-onx)>sow?sow:sox-(evt.clientX-onx);
     yytop=soy-(evt.clientY-ony)<0?"0":soy-(evt.clientY-ony)>soh?soh:soy-(evt.clientY-ony);
     tagImg.scrollTop=yytop;
     tagImg.scrollLeft=xxleft;
     closeTag.style.top=(yytop+10)+"px";
     closeTag.style.left=(xxleft+10)+"px";
     return false;
    }
    return false;
   }
   function barHidden(){
    clearTimeout(barShow);
    if(closeTag.style.display=="none")closeTag.style.display="block";
    barShow=setTimeout(function(){closeTag.style.display="none";},2000);
   }
   function closes(){
    document.body.removeChild(tag);
    document.body.removeChild(tagImg);
    clearTimeout(barShow);
    clearTimeout(imgTime);
    document.onmouseup=null;
    tag=img=tagImg=closeTag=null;
   }
   function moveStop(){
    document.onmousemove=null;
    tagImg.onmousemove=barHidden;
    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>

Tags:js javascript 图片展示

·使用javascript+xml技术实现分页浏览	07-09
·javascript 获取特定的 CSS属性值	07-02
·用Javascript +CSS实现脚注(Footnote)效果	07-02
·ASP、PHP和JSP的比较	07-02
·含标题、文字摘要介绍的图片展示效果	07-01
·巧用javascript判断浏览器版本	06-27
·层展开与关闭-运动缓冲效果	06-24
·网页制作中常用的几段小Javascript代码	06-24

热门浏览

·快速实用的人物磨皮及美白方法	05-31
·用Photoshop简单打造毛笔字效果	03-15
·扩展你的思维--影子的创意	03-19
·Photoshop制作一颗中国水晶心	04-21
·国外优秀场景CG设计欣赏	03-21
·实例详细讲解ASP生成静态页面方	03-15
·汶川地震报道超强震撼版式	05-19
·新加坡设计师Charlene Chua作品	03-17
·PS制作彩色流线字效果	03-19
·很朦胧很震撼的人体摄影	03-15
·Photoshop把美女照片制作成拼图	04-19
·世界媒体密集报道中国地震灾情	05-20
·贵妇人挑逗你的欲望极限！（一	03-21
·仿阿里妈妈首页图片轮换广告代	03-19

编辑推荐

·凌乱中的完美韵律 Barral Fabi	07-14
·关于DNS服务器的配置问题	07-11
·雅虎站点管理器如何提升网站流	07-10
·不走寻常路的日历设计（二）	07-09
·高质量的页面摘要（Snippet）赏	07-09
·四大站长论道个人网站的发展	06-30
·社交网络(SNS)：内容、通讯、关	06-27
·Redoffice.cn的域名保卫战	06-26
·搜索引擎统一Robots文件标准	06-24
·08欧洲设计奖-企业标识类	06-23
·T-shirt:以艺术为名	06-21
·功夫熊猫预热，桌面全集抢先下	06-20
·一个实用的小图弹大图的js图片	06-20
·百度“观察盒”原理分析	06-20