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

稿源：互联网 2022-04-24 08:23:05 点击： 5788 撤稿纠错

点击小图后，屏幕弹出大图效果，网站很常用的特效，值得收藏。

以下讨论的是和js 特效相关的小图弹大图Js图片展示一例教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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"> 五月二十二日成立,到目前为止，高炮团抽调四位官兵照顾孩子们的生活学习， 包括两位高中毕业生，两位硕士，另派专门炊事员。 该学校现在急需教师，特别是女教师。最近一段时间，新村准备接待从青川县关庄镇、红光乡,凉水镇苏河乡和马公乡送来的孤儿们。 <img src="http://sharechn.com/HotNews/512/img/xin0a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin1a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin2a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin3a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin4a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin5a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin6a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin7a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin8a.jpg" /> <img src="http://sharechn.com/HotNews/512/img/xin9a.jpg" /> <div class="roombot"></div> </div> <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_17a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_18a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_19a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_20a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_21a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_22a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_23a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_24a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_25a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_26a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_27a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_28a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_29a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_30a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_31a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_32a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_33a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_34a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_35a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_36a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_37a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_38a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_39a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_40a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_41a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_42a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_43a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_44a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_45a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_46a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_47a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_48a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_49a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_50a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_51a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_52a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_53a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_54a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_55a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_56a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_57a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_58a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_59a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_60a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_61a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_62a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_63a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_64a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_65a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_66a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_67a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_68a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_69a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_70a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_71a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_72a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_73a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_74a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_75a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_76a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_77a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_78a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_79a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_80a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_81a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_82a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_83a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_84a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_85a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_86a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_87a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_88a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_89a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_90a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_91a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_92a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_93a.jpg" /> <img src="http://sharechn.com/HotNews/512/wenchuan/512_94a.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.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' /> Image loading... </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="&nbsp;关闭&nbsp;"; 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> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于小图弹大图Js图片展示一例的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200812211098.shtml方便下次再访问哦。

·上一篇： 仿土豆网首页焦点图片切换效果
·下一篇： 页面顶部滑门

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

文章分类LIST >>返回首页

最新游戏

最新新闻