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

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

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

复制代码 代码如下:

<script> <BR>//CTRL+鼠标滚轮放大或缩小图片： <BR>function imgzoom(o) { <BR> if(event.ctrlKey) { <BR> var zoom = parseInt(o.style.zoom, 10) || 100; <BR> zoom -= event.wheelDelta / 12; <BR> if(zoom > 0) { <BR> o.style.zoom = zoom + &apos;%&apos;; <BR> } <BR> return false; <BR> } else { <BR> return true; <BR> } <BR>} <BR>//接收热键 <BR>document.onkeydown=mykey; <BR>var IsShow=false; <BR>function mykey() <BR>{ <BR> var key=window.event.keyCode; <BR>// alert(key); <BR> if (key==192){ <BR> if (IsShow) showIt(); <BR> else hideIt(); <BR>// IsShow=!IsShow; <BR> } //45=Insert键,16=Shift,17=Ctrl,18=Alt,192=` <BR> if (key==13 ) catchIt();//Enter,to display <BR> if (key==186) document.getElementById(&apos;add0&apos;).checked=!document.getElementById(&apos;add0&apos;).checked; <BR>} <br><br>function hideIt() <BR>{ IsShow=true; <BR> //隐藏 <BR>// document.getElementById(&apos;showHere&apos;).style.visibility=&apos;hidden&apos;; //保留占用的显示面积 <BR> document.getElementById(&apos;showHere&apos;).style.display=&apos;none&apos;; //回收占用的显示面积 <BR>// document.getElementById(&apos;imgUrlBackup&apos;).innerText=document.getElementById(&apos;thePath&apos;).value; <BR>// document.getElementById(&apos;thePath&apos;).value=&apos;&apos;; <BR>} <br><br>function showIt() <BR>{ IsShow=false; <BR> //显示 <BR>// document.getElementById(&apos;showHere&apos;).style.visibility="visible"; <BR> document.getElementById(&apos;showHere&apos;).style.display=""; <BR>// document.getElementById(&apos;thePath&apos;).value=document.getElementById(&apos;imgUrlBackup&apos;).innerText; <BR>} <br><br>function catchIt() <BR>{ <BR> ////document.write(&apos;<p><table>&apos;); <BR> showIt() <BR> var sn=Number(document.getElementById(&apos;startNum&apos;).value); <BR> var en=Number(document.getElementById(&apos;endNum&apos;).value); <BR> var str=document.getElementById(&apos;thePath&apos;).value; <BR> var IsAdd0=document.getElementById(&apos;add0&apos;).checked; <BR> var lastPos; <BR> var Discript=&apos;<center>按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。&apos;; <BR> var showSth=&apos;<table>&apos;; <BR> var fn=&apos;&apos;; <BR> fn=&apos;&apos;; <BR> if (IsAdd0) <BR> { <BR> lastPos=str.lastIndexOf(&apos;#&apos;); <BR> str=str.replace(new RegExp(&apos;#&apos;,&apos;ig&apos;),&apos;0&apos;); <BR> for(var n=sn;n<=en;n++) <BR> { <BR> fn=str.substring(0,lastPos-String(n).length+1) + n + str.substring(lastPos+1); <BR> showSth=showSth+GetImgSrc(fn); <BR> } <BR> } <BR> else <BR> { <BR> for(var n=sn;n<=en;n++) <BR> { <BR> fn=str.replace(&apos;#&apos;,n); <BR> showSth=showSth+GetImgSrc(fn); <BR> } <BR> } <BR> showSth=showSth+&apos;&apos;; <BR>// alert(showSth); <BR> document.getElementById(&apos;showHere&apos;).innerHTML=Discript+showSth+Discript; <BR> // document.refresh(); <BR> IsShow=false; <BR>} <br><br>function GetImgSrc(ImgUrl) <BR>{ //让图片载入后自动调整显示尺寸以适应屏幕，并提取文件体积信息附加到提示信息上 <BR> //在鼠标经过时，设置鼠标为手形状 <BR> //在鼠标点击时，在新窗口打开图片 <BR> //鼠标滚轮滚动时，触发缩放图片函数 <BR> //设置图片的提示信息 <BR> return &apos; <img onerror="javascript:this.style.display=\&apos;none\&apos;;" src="&apos; + ImgUrl + &apos;" onload="if(this.width alt="发一个自己用JS写的实用看图工具实现代码_图象特效" >screen.width*0.7) {this.resized=true; this.width=screen.width*0.7;DispImgInfo(this);}" onmouseover="if(this.resized) this.style.cursor=&apos;hand&apos;;" onclick="window.open(this.src);" onmousewheel="return imgzoom(this);" alt="URL:&apos; + ImgUrl + &apos; 点击=在新窗口查看,CTRL+鼠标滚轮=缩放图片" >&apos;; <BR>} <br><br>//把所有图片按thesize文本框指定比例进行缩放 <BR>function ImgZoom(Operation) { <BR> var ScaleTo=document.getElementById(&apos;thesize&apos;).value/100; <BR> if (Operation=="toBig") {ScaleTo=1+ScaleTo;} <BR> for(var i=0;i<document.images.length;i++) <BR> { document.images[i].width=document.images[i].width*ScaleTo; <BR> //不用改变高度,会自动跟随长度变化而等比变化. <BR> } <BR>} <br><br><BR>// 宽:&apos;+this.width+&apos;,高:&apos;+this.height+&apos;,&apos;+getImgsize(this)+&apos; <br><br>function DispImgInfo(img) { <BR> if (img.src!=null && img.src!="") <BR> img.alt=img.alt + " 宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img); <BR>} <br><br>function discAllimages() { <BR> //getAllimages <BR> for (var i=0; i<document.images.length; i++) <BR> { var img=document.images[i]; <BR> if (img.src!=null && img.src!="") <BR> img.alt=img.alt + " 宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img); <BR> } <BR>} <br><br>function getImgsize(x) { <BR> var picSize=x.fileSize; <BR> if (picSize>1000) picSize=Math.round(picSize/1024*100)/100+&apos;KB&apos;; <BR> else if (picSize > 0) picSize=picSize+&apos;字节&apos;; <BR> else picSize=&apos;未知&apos;; <BR> return picSize; <BR>} <BR></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=篇幅较长时可返回开头。

---

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

固位补零
　



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

---

<script> <BR> document.getElementById(&apos;thePath&apos;).focus(); <BR></script>

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

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