网页常见的点击小图片全屏显示大图效果，右击图片弹出关闭确认框，经典实用图片放大特效。
<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>点击双击小图全屏显示大图效果_武鸣人</title>
<link rel="stylesheet" href="/img/20240307_www_wuming_ren_1.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/img/20240307_www_wuming_ren_2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/img/20240307_www_wuming_ren_3.css" type="text/css" media="screen" />
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="room layout" id="xwxc">
<img src="/img/20240307_www_wuming_ren_22w.jpg" />
<img src="/img/20240307_www_wuming_ren_23w.jpg" />
<img src="/img/20240307_www_wuming_ren_24w.jpg" />
<img src="/img/20240307_www_wuming_ren_25w.jpg" />
<img src="/img/20240307_www_wuming_ren_26w.jpg" />
<img src="/img/20240307_www_wuming_ren_27w.jpg" />
<img src="/img/20240307_www_wuming_ren_28w.jpg" />
<img src="/img/20240307_www_wuming_ren_29w.jpg" />
<img src="/img/20240307_www_wuming_ren_30w.jpg" />
<img src="/img/20240307_www_wuming_ren_31w.jpg" />
<div class="roombot"></div>
</div>
<div class="layout auto wenchua" id="wenchuan"><div>
<img src="/img/20240307_www_wuming_ren_32w.jpg" />
<img src="/img/20240307_www_wuming_ren_33w.jpg" />
<img src="/img/20240307_www_wuming_ren_34w.jpg" />
<img src="/img/20240307_www_wuming_ren_35w.jpg" />
<img src="/img/20240307_www_wuming_ren_36w.jpg" />
<img src="/img/20240307_www_wuming_ren_37w.jpg" />
<img src="/img/20240307_www_wuming_ren_38w.jpg" />
<img src="/img/20240307_www_wuming_ren_39w.jpg" />
<img src="/img/20240307_www_wuming_ren_40w.jpg" />
<img src="/img/20240307_www_wuming_ren_41w.jpg" />
<img src="/img/20240307_www_wuming_ren_42w.jpg" />
<img src="/img/20240307_www_wuming_ren_43w.jpg" />
<img src="/img/20240307_www_wuming_ren_44w.jpg" />
<img src="/img/20240307_www_wuming_ren_45w.jpg" />
<img src="/img/20240307_www_wuming_ren_46w.jpg" />
<img src="/img/20240307_www_wuming_ren_47w.jpg" />
<img src="/img/20240307_www_wuming_ren_48w.jpg" />
<img src="/img/20240307_www_wuming_ren_49w.jpg" />
<img src="/img/20240307_www_wuming_ren_50w.jpg" />
<img src="/img/20240307_www_wuming_ren_51w.jpg" />
<img src="/img/20240307_www_wuming_ren_52w.jpg" />
<img src="/img/20240307_www_wuming_ren_53w.jpg" />
<img src="/img/20240307_www_wuming_ren_54w.jpg" />
<img src="/img/20240307_www_wuming_ren_55w.jpg" />
<img src="/img/20240307_www_wuming_ren_56w.jpg" />
<img src="/img/20240307_www_wuming_ren_57w.jpg" />
<img src="/img/20240307_www_wuming_ren_58w.jpg" />
<img src="/img/20240307_www_wuming_ren_59w.jpg" />
</div></div>
<script type="text/javascript">
function ImgShow(evt){
var imgTag=(window.event)?event.srcElement:evt.target;
var imgPath=imgTag.src.replace("w.jpg","w_big.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);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.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;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.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);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.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";
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.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>本文来自武鸣人网站，转载请注明出处