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

 　因为某些网站把内容图片以每页显示一幅的形式呈现，而每页都有大量没用的垃圾信息(广告、新闻和无关图片)，非常影响看图效率。所以写了这个，只要知道第一幅图片的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 -- 碧海情天、淹没天空的海  邮箱：[e-mail]   制作时间：2006年8月
<br>功能：批量显示带数字编号的本地或网络图片。如 c:a##.gif 或 file:///c:/a##.gif 或 http://www.cctv.com/a3#.jpg
<br>说明：如图片名称是a02而非a2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐)
<br>热键：`(~)键=显示开/关。；键=开关固位补零。图片上ctrl+鼠标滚轮=缩放图片。点击图片=在新窗口打开。home=篇幅较长时可返回开头。
<hr>
路径：<input id='thepath' style="apos: " type='text'></input>
起始编号：<input id='startnum' style="apos: " type='text'></input>
结束编号：<input id='endnum' style="apos: " type='text'></input><br>
<input id='add0' type='checkbox'></input>固位补零
　<input onclick=javascript:catchit() type='button' value='显示之'></input>
<!--  <input type='button' id='see' onclick="javascript:showit()" value='再显示'></input>
-->
<input onclick=javascript:imgzoom('tosmall') type='button' value='缩小'></input>
<input onclick=javascript:imgzoom('tobig') type='button' value='放大'></input>
缩放比例(百分之)：<input id='thesize' style="apos: " type='text' value=50>(回车即显示图片)
<!--  <input type='button' onclick="javascript:discallimages()" value="显示图片信息">
-->
<hr>
<div id='showhere'></div>
<div id='imgurlbackup' style="display: none; apos: "></div>

<script>
    document.getelementbyid('thepath').focus();
</script>
<!--
作者：zhaoliang -- 碧海情天、淹没天空的海  邮箱：[e-mail]
看显示区代码javascript:alert(document.getelementbyid('showhere').innerhtml);
-->

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

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