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

时间:2021-05-25

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

  介绍完了,下面是代码内容,希望能对JS新手们有点帮助吧(请自行把下面代码里所有的“'”替换为单引号。我对这里这个格式实在没辙了):
复制代码 代码如下:
<SCRIPT>
//CTRL+鼠标滚轮放大或缩小图片:
functionimgzoom(o){
if(event.ctrlKey){
varzoom=parseInt(o.style.zoom,10)||100;
zoom-=event.wheelDelta/12;
if(zoom>0){
o.style.zoom=zoom+&apos;%&apos;;
}
returnfalse;
}else{
returntrue;
}
}
//接收热键
document.onkeydown=mykey;
varIsShow=false;
functionmykey()
{
varkey=window.event.keyCode;
//alert(key);
if(key==192){
if(IsShow)showIt();
elsehideIt();
//IsShow=!IsShow;
}//45=Insert键,16=Shift,17=Ctrl,18=Alt,192=`
if(key==13)catchIt();//Enter,todisplay
if(key==186)document.getElementById(&apos;add0&apos;).checked=!document.getElementById(&apos;add0&apos;).checked;
}

functionhideIt()
{IsShow=true;
//隐藏
//document.getElementById(&apos;showHere&apos;).style.visibility=&apos;hidden&apos;;//保留占用的显示面积
document.getElementById(&apos;showHere&apos;).style.display=&apos;none&apos;;//回收占用的显示面积
//document.getElementById(&apos;imgUrlBackup&apos;).innerText=document.getElementById(&apos;thePath&apos;).value;
//document.getElementById(&apos;thePath&apos;).value=&apos;&apos;;
}

functionshowIt()
{IsShow=false;
//显示
//document.getElementById(&apos;showHere&apos;).style.visibility="visible";
document.getElementById(&apos;showHere&apos;).style.display="";
//document.getElementById(&apos;thePath&apos;).value=document.getElementById(&apos;imgUrlBackup&apos;).innerText;
}

functioncatchIt()
{
////document.write(&apos;<p><table>&apos;);
showIt()
varsn=Number(document.getElementById(&apos;startNum&apos;).value);
varen=Number(document.getElementById(&apos;endNum&apos;).value);
varstr=document.getElementById(&apos;thePath&apos;).value;
varIsAdd0=document.getElementById(&apos;add0&apos;).checked;
varlastPos;
varDiscript=&apos;<center>按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。</center>&apos;;
varshowSth=&apos;<table>&apos;;
varfn=&apos;&apos;;
fn=&apos;&apos;;
if(IsAdd0)
{
lastPos=str.lastIndexOf(&apos;#&apos;);
str=str.replace(newRegExp(&apos;#&apos;,&apos;ig&apos;),&apos;0&apos;);
for(varn=sn;n<=en;n++)
{
fn=str.substring(0,lastPos-String(n).length+1)+n+str.substring(lastPos+1);
showSth=showSth+GetImgSrc(fn);
}
}
else
{
for(varn=sn;n<=en;n++)
{
fn=str.replace(&apos;#&apos;,n);
showSth=showSth+GetImgSrc(fn);
}
}
showSth=showSth+&apos;</table>&apos;;
//alert(showSth);
document.getElementById(&apos;showHere&apos;).innerHTML=Discript+showSth+Discript;
//document.refresh();
IsShow=false;
}

functionGetImgSrc(ImgUrl)
{//让图片载入后自动调整显示尺寸以适应屏幕,并提取文件体积信息附加到提示信息上
//在鼠标经过时,设置鼠标为手形状
//在鼠标点击时,在新窗口打开图片
//鼠标滚轮滚动时,触发缩放图片函数
//设置图片的提示信息
return&apos;<imgonerror="javascript:this.style.display=\&apos;none\&apos;;"src="&apos;+ImgUrl+&apos;"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=&apos;hand&apos;;"onclick="window.open(this.src);"onmousewheel="returnimgzoom(this);"alt="URL:&apos;+ImgUrl+&apos;点击=在新窗口查看,CTRL+鼠标滚轮=缩放图片">&apos;;
}

//把所有图片按thesize文本框指定比例进行缩放
functionImgZoom(Operation){
varScaleTo=document.getElementById(&apos;thesize&apos;).value/100;
if(Operation=="toBig"){ScaleTo=1+ScaleTo;}
for(vari=0;i<document.images.length;i++)
{document.images[i].width=document.images[i].width*ScaleTo;
//不用改变高度,会自动跟随长度变化而等比变化.
}
}


//宽:&apos;+this.width+&apos;,高:&apos;+this.height+&apos;,&apos;+getImgsize(this)+&apos;

functionDispImgInfo(img){
if(img.src!=null&&img.src!="")
img.alt=img.alt+"宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img);
}

functiondiscAllimages(){
//getAllimages
for(vari=0;i<document.images.length;i++)
{varimg=document.images[i];
if(img.src!=null&&img.src!="")
img.alt=img.alt+"宽:"+img.width+",高:"+img.height+",大小:"+getImgsize(img);
}
}

functiongetImgsize(x){
varpicSize=x.fileSize;
if(picSize>1000)picSize=Math.round(picSize/1024*100)/100+&apos;KB&apos;;
elseif(picSize>0)picSize=picSize+&apos;字节&apos;;
elsepicSize=&apos;未知&apos;;
returnpicSize;
}
</SCRIPT>


作者:ZhaoLiang--碧海情天、淹没天空的海邮箱:thedoc01@163.com制作时间:2006年8月
<BR>功能:批量显示带数字编号的本地或网络图片。如C:A##.gif或file:///C:/A##.gif或http://
看显示区代码javascript:alert(document.getElementById(&apos;showHere&apos;).innerHTML);
-->

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章