点击或双击小图全屏显示大图效果

大陆 js特效 2021-02-10 0

网页常见的点击小图片全屏显示大图效果,右击图片弹出关闭确认框,经典实用图片放大特效。

<!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=gb2312" />
<meta name="keywords" content="博客,个人博客,优秀个人博客,优秀博客,博客网站,js特效,js特效代码,广告代码,www.wuming.ren" />
<meta name="description" content="欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren" />
<title>点击双击小图全屏显示大图效果-大陆博客</title>
<link rel="stylesheet" href="/img/201111014wwwzzjsnet_1.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/img/201111014wwwzzjsnet_2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/img/201111014wwwzzjsnet_3.css" type="text/css" media="screen" />
</head>
<body>
本文来源于<a href="http://www.64pc.com/">大陆博客</a>,百度一下:大陆博客,直接找到我们的官方网站。<hr>
<!--欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren-->
<script type="text/javascript" src="http://www.wuming.ren/a/tc.js"></script>
 <div class="room layout" id="xwxc">
  <img src="/img/20111101zzjs_net_1zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_2zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_3zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_4zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_5zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_6zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_7zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_8zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_9zzjs_net.jpg" />
  <img src="/img/20111101zzjs_net_10zzjs_net.jpg" />
  <div class="roombot"></div>
 </div>
 <div class="layout auto wenchua" id="wenchuan"><div>
  <img src="/img/2011www_1zzjs_net.jpg" />
  <img src="/img/2011www_2zzjs_net.jpg" />
  <img src="/img/2011www_3zzjs_net.jpg" />
  <img src="/img/2011www_4zzjs_net.jpg" />
  <img src="/img/2011www_5zzjs_net.jpg" />
  <img src="/img/2011www_6zzjs_net.jpg" />
  <img src="/img/2011www_7zzjs_net.jpg" />
  <img src="/img/2011www_8zzjs_net.jpg" />
  <img src="/img/2011www_9zzjs_net.jpg" />
  <img src="/img/2011www_10zzjs_net.jpg" />
  <img src="/img/2011www_11zzjs_net.jpg" />
  <img src="/img/2011www_12zzjs_net.jpg" />
  <img src="/img/2011www_13zzjs_net.jpg" />
  <img src="/img/2011www_14zzjs_net.jpg" />
  <img src="/img/2011www_15zzjs_net.jpg" />
  <img src="/img/2011www_16zzjs_net.jpg" />
  <img src="/img/2011www_17zzjs_net.jpg" />
  <img src="/img/2011www_18zzjs_net.jpg" />
  <img src="/img/2011www_19zzjs_net.jpg" />
  <img src="/img/2011www_20zzjs_net.jpg" />
  <img src="/img/2011www_21zzjs_net.jpg" />
  <img src="/img/2011www_22zzjs_net.jpg" />
  <img src="/img/2011www_23zzjs_net.jpg" />
  <img src="/img/2011www_24zzjs_net.jpg" />
  <img src="/img/2011www_25zzjs_net.jpg" />
  <img src="/img/2011www_26zzjs_net.jpg" />
  <img src="/img/2011www_27zzjs_net.jpg" />
  <img src="/img/2011www_28zzjs_net.jpg" />
  </div></div>
 <script type="text/javascript">
  function ImgShow(evt){
   var imgTag=(window.event)?event.srcElement:evt.target;
   var imgPath=imgTag.src.replace("zzjs_net.jpg","zzjs.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'><b style='color:#999999;font-weight:normal'>图片正在加载……<br />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);
    }//欢迎来到大陆d博客,我们的网址是www.6 4pc.com,大陆`f博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
    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;
    }
   }//欢迎来到大陆`2博客,我们的网址是www .64pc.com,大陆2`博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
   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);
   }//欢迎来到大陆`6博客,我们的网址是www.64 pc.com,大陆`1博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
   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";
   }
  }//欢迎来到大陆`21博客,我们的网址是www.64p c.com,大陆`76博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
 </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>


评论