管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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

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

复制代码代码如下:

　　//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 -- 碧海情天、淹没天空的海邮箱：[email protected] 制作时间：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 type='button' id='see' onclick="javascript:showIt()" value='再显示'></input>

　　-->

　　缩放比例(百分之)：<INPUT id='thesize' style="apos: " type='text' value=50>(回车即显示图片)

<!-- <input type='button' onclick="javascript:discAllimages()" value="显示图片信息">

　　-->

　　<HR>

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

　　</SCRIPT>

<!--

　　作者：ZhaoLiang -- 碧海情天、淹没天空的海邮箱：[email protected]

　　看显示区代码javascript:alert(document.getElementById('showHere').innerHTML);

　　-->

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

　　(更新：修改了一下，对于不存在的图片，自动隐藏，不占据显示空间——通过img的onerror事件进行处理。

　　另外要说的，这里现在这个代码编辑器，很容易导致编辑后的内容大乱套。我花了很长时间来改正错误的替换代码，感觉比我写这个脚本工具都累。而且，里面SPAN的生成，完全没有优化，不必要的重复数量简直惊人，希望OpenSoft开发组尽快完善。)

教程首页更多教程