本文介绍了一个用于批量展示带数字编号的本地或网络图片的工具。该工具可通过输入起始和结束编号，自动加载图片，并提供了多种实用功能，如图片缩放、显示开关等。
前些时候受邀参加2008软件技术英雄会，但因为自身事情的原因，有好一段时间很少来，所以看到站内通知的时候已经晚了。深感可惜，错过了一次增广见闻和认识同行朋友的机会。过后看了一下会议的某些报道，评了一个博客奖。对自己有所触动，当然，因为经历和努力的关系，和高手们比不了，只不过，想到自己也做了好些年，现在都一直在考虑转行了，可是这么长时间里，自己曾有过很多心得经验，过了就忘了，根本没有去想好好集结整理一下，导致湖光掠影一般，一点外在痕迹都没留下，换工作时也常发生很难让对方确认能力和经验的问题。
功能：批量显示带数字编号的本地或网络图片。如 C:A##.gif 或 file:///C:/A##.gif 或 http://www.cctv.com/A3#.jpg
说明：如图片名称是A02而非A2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐)
热键：`(~)键=显示开/关。；键=开关固位补零。图片上CTRL+鼠标滚轮=缩放图片。点击图片=在新窗口打开。HOME=篇幅较长时可返回开头。
路径： 起始编号： 结束编号：
固位补零 <!-- <input type='button' id='see' onclick="javascript:showIt()" value='再显示'></input> --> 缩放比例(百分之)：(回车即显示图片) <!-- <input type='button' onclick="javascript:discAllimages()" value="显示图片信息"> -->
<script> document.getElementById('thePath').focus(); </script><!-- 作者：ZhaoLiang -- 碧海情天、淹没天空的海 邮箱：thedoc01@163.com 看显示区代码javascript:alert(document.getElementById('showHere').innerHTML); -->
所以决定慢慢来照顾一下博客吧，这里先把眼前就有的一个小东西拿出来和大家分享一下，这是2006年的时候（文本里记下了时间，不然也忘记了）为了自己看网络图片方便而写的。
因为某些网站把内容图片以每页显示一幅的形式呈现，而每页都有大量没用的垃圾信息(广告、新闻和无关图片)，非常影响看图效率。所以写了这个，只要知道第一幅图片的URL，填在本网页里，设置一下起始和结束编号，就可以显示带有数字编号的图片了，同时还有一些常用到的贴心功能。当然，对于某些网站存放的无序图片就无能为力了。
介绍完了，下面是代码内容，希望能对JS新手们有点帮助吧(请自行把下面代码里所有的“'”替换为单引号。我对这里这个格式实在没辙了)：
<script> //CTRL+鼠标滚轮放大或缩小图片： function imgzoom(o) { if(event.ctrlKey) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom -= event.wheelDelta / 12; if(zoom > 0) { o.style.zoom = zoom + '%'; } return false; } else { return true; } } //接收热键 document.onkeydown=mykey; var IsShow=false; function mykey() { var key=window.event.keyCode; // alert(key); if (key==192){ if (IsShow) showIt(); else hideIt(); // IsShow=!IsShow; } //45=Insert键,16=Shift,17=Ctrl,18=Alt,192=` if (key==13 ) catchIt();//Enter,to display if (key==186) document.getElementById('add0').checked=!document.getElementById('add0').checked; } function hideIt() { IsShow=true; //隐藏 // document.getElementById('showHere').style.visibility='hidden'; //保留占用的显示面积 document.getElementById('showHere').style.display='none'; //回收占用的显示面积 // document.getElementById('imgUrlBackup').innerText=document.getElementById('thePath').value; // document.getElementById('thePath').value=''; } function showIt() { IsShow=false; //显示 // document.getElementById('showHere').style.visibility="visible"; document.getElementById('showHere').style.display=""; // document.getElementById('thePath').value=document.getElementById('imgUrlBackup').innerText; } function catchIt() { ////document.write('<p><table>'); showIt() var sn=Number(document.getElementById('startNum').value); var en=Number(document.getElementById('endNum').value); var str=document.getElementById('thePath').value; var IsAdd0=document.getElementById('add0').checked; var lastPos; var Discript='<center>按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。</center>'; var showSth='<table>'; var fn=''; fn=''; if (IsAdd0) { lastPos=str.lastIndexOf('#'); str=str.replace(new RegExp('#','ig'),'0'); for(var n=sn;n<=en;n++) { fn=str.substring(0,lastPos-String(n).length+1) + n + str.substring(lastPos+1); showSth=showSth+GetImgSrc(fn); } } else { for(var n=sn;n<=en;n++) { fn=str.replace('#',n); showSth=showSth+GetImgSrc(fn); } } showSth=showSth+'</table>'; // alert(showSth); document.getElementById('showHere').innerHTML=Discript+showSth+Discript; // document.refresh(); IsShow=false; } function GetImgSrc(ImgUrl) { //让图片载入后自动调整显示尺寸以适应屏幕，并提取文件体积信息附加到提示信息上 //在鼠标经过时，设置鼠标为手形状 //在鼠标点击时，在新窗口打开图片 //鼠标滚轮滚动时，触发缩放图片函数 //设置图片的提示信息 return ' <img onerror="javascript:this.style.display=/'none/';" src="' + ImgUrl + '" onload="if(this.width >screen.width*0.7) {this.resized=true; this.width=screen.width*0.7;DispImgInfo(this);}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="window.open(this.src);" onmousewheel="return imgzoom(this);" alt="URL:' + ImgUrl + ' 点击=在新窗口查看,CTRL+鼠标滚轮=缩放图片" >'; } //把所有图片按thesize文本框指定比例进行缩放 function ImgZoom(Operation) { var ScaleTo=document.getElementById('thesize').value/100; if (Operation=="toBig") {ScaleTo=1+ScaleTo;} for(var i=0;i<document.images.length;i++) { document.images[i].width=document.images[i].width*ScaleTo; //不用改变高度,会自动跟随长度变化而等比变化. } } // 宽:'+this.width+',高:'+this.height+','+getImgsize(this)+' function DispImgInfo(img) { if (img.src!=null && img.src!="") img.alt=img.alt + " 宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img); } function discAllimages() { //getAllimages for (var i=0; i<document.images.length; i++) { var img=document.images[i]; if (img.src!=null && img.src!="") img.alt=img.alt + " 宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img); } } function getImgsize(x) { var picSize=x.fileSize; if (picSize>1000) picSize=Math.round(picSize/1024*100)/100+'KB'; else if (picSize > 0) picSize=picSize+'字节'; else picSize='未知'; return picSize; } </script> 作者：ZhaoLiang -- 碧海情天、淹没天空的海 邮箱：thedoc01@163.com 制作时间：2006年8月功能：批量显示带数字编号的本地或网络图片。如 C:A##.gif 或 file:///C:/A##.gif 或 http://www.cctv.com/A3#.jpg
说明：如图片名称是A02而非A2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐)
热键：`(~)键=显示开/关。；键=开关固位补零。图片上CTRL+鼠标滚轮=缩放图片。点击图片=在新窗口打开。HOME=篇幅较长时可返回开头。
路径： 起始编号： 结束编号：
固位补零 <!-- <input type='button' id='see' onclick="javascript:showIt()" value='再显示'></input> --> 缩放比例(百分之)：(回车即显示图片) <!-- <input type='button' onclick="javascript:discAllimages()" value="显示图片信息"> -->
<script> document.getElementById('thePath').focus(); </script><!-- 作者：ZhaoLiang -- 碧海情天、淹没天空的海 邮箱：thedoc01@163.com 看显示区代码javascript:alert(document.getElementById('showHere').innerHTML); -->
平时也不注意整理，所以这个文件改过几个不同版本，发完了我才想起，曾经把hideIt()和showit()合并成一个函数（根据参数进行处理就行了），还有其它一些细节。因为对这里的编辑还不太熟，就不再改了，大家有兴趣自己试试吧。如果有什么建议能提供的话就更好了。
(更新：修改了一下，对于不存在的图片，自动隐藏，不占据显示空间——通过img的onerror事件进行处理。
另外要说的，这里现在这个代码编辑器，很容易导致编辑后的内容大乱套。我花了很长时间来改正错误的替换代码，感觉比我写这个脚本工具都累。而且，里面SPAN的生成，完全没有优化，不必要的重复数量简直惊人，希望OpenSoft开发组尽快完善。)
扫一扫
5693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
