发一个自己用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()
{
    ///https://img.qb5200.com/download-x/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月
<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 -- 碧海情天、淹没天空的海  邮箱：thedoc01@163.com
看显示区代码javascript:alert(document.getElementById('showHere').innerHTML);
-->