发一个自己用JS写的实用看图工具

　前些时候受邀参加2008软件技术英雄会，但因为自身事情的原因，有好一段时间很少来，所以看到站内通知的时候已经晚了。深感可惜，错过了一次增广见闻
和认识同行朋友的机会。过后看了一下会议的某些报道，评了一个博客奖。对自己有所触动，当然，因为经历和努力的关系，和高手们比不了，只不过，想到自己也
做了好些年，现在都一直在考虑转行了，可是这么长时间里，自己曾有过很多心得经验，过了就忘了，根本没有去想好好集结整理一下，导致湖光掠影一般，一点外
在痕迹都没留下，换工作时也常发生很难让对方确认能力和经验的问题。
　　所以决定慢慢来照顾一下博客吧，这里先把眼前就有的一个小东西拿出来和大家分享一下，这是2006年的时候（文本里记下了时间，不然也忘记了）为了自己看网络图片方便而写的。

　　因为某些网站把内容图片以每页显示一幅的形式呈现，而每页都有大量没用的垃圾信息(广告、新闻和无关图片)，非常影响看图效率。所以写了这个，
只要知道第一幅图片的URL，填在本网页里，设置一下起始和结束编号，就可以显示带有数字编号的图片了，同时还有一些常用到的贴心功能。当然，对于某些网
站存放的无序图片就无能为力了。

　　介绍完了，下面是代码内容，希望能对JS新手们有点帮助吧(请自行把下面代码里所有的“'”替换为单引号。我对这里这个格式实在没辙了)：

1.   
   2. //CTRL+鼠标滚轮放大或缩小图片：  
   3. function imgzoom(o) {  
   4.     if(event.ctrlKey) {  
   5.         var zoom = parseInt(o.style.zoom, 10) || 100;  
   6.         zoom -= event.wheelDelta / 12;  
   7.         if(zoom > 0) {  
   8.             o.style.zoom = zoom + '%';  
   9.         }  
  10.         return false;  
  11.     } else {  
  12.         return true;  
  13.     }  
  14. }  
  15. //接收热键  
  16. document.onkeydown=mykey;  
  17. var IsShow=false;  
  18. function  mykey()  
  19. {  
  20.     var  key=window.event.keyCode;  
  21. //    alert(key);  
  22.     if (key==192){  
  23.         if (IsShow) showIt();  
  24.             else hideIt();  
  25. //        IsShow=!IsShow;  
  26.     }    //45=Insert键,16=Shift,17=Ctrl,18=Alt,192=`  
  27.     if (key==13 ) catchIt();//Enter,to display  
  28.     if (key==186)  document.getElementById('add0').checked=!document.getElementById('add0').checked;  
  29. }  
  30.   
  31. function hideIt()  
  32. {    IsShow=true;  
  33.     //隐藏  
  34. //    document.getElementById('showHere').style.visibility='hidden';    //保留占用的显示面积  
  35.     document.getElementById('showHere').style.display='none';        //回收占用的显示面积  
  36. //    document.getElementById('imgUrlBackup').innerText=document.getElementById('thePath').value;  
  37. //    document.getElementById('thePath').value='';  
  38. }  
  39.   
  40. function showIt()  
  41. {    IsShow=false;  
  42.     //显示  
  43. //    document.getElementById('showHere').style.visibility="visible";  
  44.     document.getElementById('showHere').style.display="";  
  45. //    document.getElementById('thePath').value=document.getElementById('imgUrlBackup').innerText;  
  46. }  
  47.   
  48. function catchIt()  
  49. {  
  50.     ////document.write('');  
  51.     showIt()  
  52.     var sn=Number(document.getElementById('startNum').value);  
  53.     var en=Number(document.getElementById('endNum').value);  
  54.     var str=document.getElementById('thePath').value;  
  55.     var IsAdd0=document.getElementById('add0').checked;  
  56.     var lastPos;  
  57.     var Discript='按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。';  
  58.     var showSth='';  
  59.     var fn='';  
  60.     fn='';  
  61.     if (IsAdd0)  
  62.     {  
  63.         lastPos=str.lastIndexOf('#');  
  64.          strstr=str.replace(new RegExp('#','ig'),'0');  
  65.         for(var n=sn;n<=en;n++)  
  66.         {  
  67.             fn=str.substring(0,lastPos-String(n).length+1) + n + str.substring(lastPos+1);  
  68.             showSthshowSth=showSth+GetImgSrc(fn);  
  69.         }  
  70.     }  
  71.     else  
  72.     {  
  73.         for(var n=sn;n<=en;n++)  
  74.         {  
  75.             fn=str.replace('#',n);  
  76.             showSthshowSth=showSth+GetImgSrc(fn);  
  77.         }  
  78.     }  
  79.     showSthshowSth=showSth+'';  
  80. //    alert(showSth);  
  81.     document.getElementById('showHere').innerHTML=Discript+showSth+Discript;  
  82.     //    document.refresh();  
  83.     IsShow=false;  
  84. }  
  85.   
  86. function GetImgSrc(ImgUrl)  
  87. {    //让图片载入后自动调整显示尺寸以适应屏幕，并提取文件体积信息附加到提示信息上  
  88.     //在鼠标经过时，设置鼠标为手形状  
  89.     //在鼠标点击时，在新窗口打开图片  
  90.     //鼠标滚轮滚动时，触发缩放图片函数  
  91.     //设置图片的提示信息  
  92.     return ' 

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+鼠标滚轮=缩放图片" >';  
  93. }  
  94.   
  95. //把所有图片按thesize文本框指定比例进行缩放  
  96. function ImgZoom(Operation) {  
  97.     var ScaleTo=document.getElementById('thesize').value/100;  
  98.     if (Operation=="toBig") {ScaleTo=1+ScaleTo;}  
  99.     for(var i=0;i1000) picSize=Math.round(picSize/1024*100)/100+'KB';  
 125.     else if (picSize > 0) picSizepicSize=picSize+'字节';  
 126.     else picSize='未知';  
 127.     return picSize;  
 128. }  
 129.   
 130.   
 131.   
 132. 作者：ZhaoLiang -- 碧海情天、淹没天空的海  邮箱：thedoc01@163.com   ***时间：2006年8月  
 133. 
功能：批量显示带数字编号的本地或网络图片。如 C:A##.gif 或 file:///C:/A##.gif 或 http://www.cctv.com/A3#.jpg  
 134. 
说明：如图片名称是A02而非A2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐)  
 135. 
热键：`(~)键=显示开/关。；键=开关固位补零。图片上CTRL+鼠标滚轮=缩放图片。点击图片=在新窗口打开。HOME=篇幅较长时可返回开头。  
 136.   
 137. 路径：  
 138. 起始编号：  
 139. 结束编号：
  
 140. 固位补零  
 141. 　  
 142.   
 146.   
 147.   
 148. 缩放比例(百分之)：(回车即显示图片)  
 149.   
 153.   
 154.   
 155.   
 156.   
 157.   
 158.     document.getElementById('thePath').focus();  
 159.   
 160. <!--  
 161. 作者：ZhaoLiang -- 碧海情天、淹没天空的海  邮箱：thedoc01@163.com  
 162. 看显示区代码javascript:alert(document.getElementById('showHere').innerHTML);  
 163. -->

//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('');
    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='按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。';
    var showSth='';
    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+'';
//    alert(showSth);
    document.getElementById('showHere').innerHTML=Discript+showSth+Discript;
    //    document.refresh();
    IsShow=false;
}

function GetImgSrc(ImgUrl)
{    //让图片载入后自动调整显示尺寸以适应屏幕，并提取文件体积信息附加到提示信息上
    //在鼠标经过时，设置鼠标为手形状
    //在鼠标点击时，在新窗口打开图片
    //鼠标滚轮滚动时，触发缩放图片函数
    //设置图片的提示信息
    return ' 

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;i1000) picSize=Math.round(picSize/1024*100)/100+'KB';
    else if (picSize > 0) picSize=picSize+'字节';
    else picSize='未知';
    return picSize;
}

作者：ZhaoLiang -- 碧海情天、淹没天空的海  邮箱：thedoc01@163.com   ***时间：2006年8月

功能：批量显示带数字编号的本地或网络图片。如 C:A##.gif 或 file:///C:/A##.gif 或 http://www.cctv.com/A3#.jpg 
说明：如图片名称是A02而非A2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐)

热键：`(~)键=显示开/关。；键=开关固位补零。图片上CTRL+鼠标滚轮=缩放图片。点击图片=在新窗口打开。HOME=篇幅较长时可返回开头。

路径：
起始编号：
结束编号：

固位补零
　

缩放比例(百分之)：(回车即显示图片)

    document.getElementById('thePath').focus();

<!--
作者：ZhaoLiang -- 碧海情天、淹没天空的海  邮箱：thedoc01@163.com
看显示区代码javascript:alert(document.getElementById('showHere').innerHTML);
-->

　　平时也不注意整理，所以这个文件改过几个不同版本，发完了我才想起，曾经把hideIt()和showit()合并成一个函数（根据参数进行
处理就行了），还有其它一些细节。因为对这里的编辑还不太熟，就不再改了，大家有兴趣自己试试吧。如果有什么建议能提供的话就更好了。

(更新：修改了一下，对于不存在的图片，自动隐藏，不占据显示空间——通过img的onerror事件进行处理。
另外要说的，这里现在这个代码编辑器，很容易导致编辑后的内容大乱套。我花了很长时间来改正错误的替换代码，感觉比我写这个脚本工具都累。而且，里面SPAN的生成，完全没有优化，不必要的重复数量简直惊人，希望OpenSoft开发组尽快完善。)