玩法介绍当前位置:万彩娱乐平台 > 玩法介绍 > >

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

  

[JS,看图工具]发一个自己用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('

');  
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='
按1旁边的“`”键可隐藏/显示图片区域。点击图片可在新窗口查看原图。CTRL+鼠标滚轮可放大或缩小图片。
';  
var showSth='
';  
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+'
';  
// alert(showSth);  
document.getElementById('showHere').innerHTML=Discript+showSth+Discript;  
// document.refresh();  
IsShow=false;  
}  
  
function GetImgSrc(ImgUrl)  
{ //让图片载入后自动调整显示尺寸以适应屏幕,并提取文件体积信息附加到提示信息上  
//在鼠标经过时,设置鼠标为手形状  
//在鼠标点击时,在新窗口打开图片  
//鼠标滚轮滚动时,触发缩放图片函数  
//设置图片的提示信息  
return ' 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[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 { 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;  
}  
  
  
  
作者:ZhaoLiang -- 碧海情天、淹没天空的海 邮箱: 制作时间:2006年8月  

功能:批量显示带数字编号的本地或网络图片。如 C:A##.gif 或 或  

说明:如图片名称是A02而非A2时,可用##指定编号的固定长度并选择“固位补零”,则不足位的会自动用0补齐)  

热键:`(~)键=显示开/关。;键=开关固位补零。图片上CTRL+鼠标滚轮=缩放图片。点击图片=在新窗口打开。HOME=篇幅较长时可返回开头。

  


  
路径:  
起始编号:  
结束编号:
  
固位补零  
   
  
  
  
缩放比例(百分之):(回车即显示图片)  
  

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

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

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

(责任编辑:admin)

上一篇:js获取客户端外网ip的简单实例

下一篇:AngularJS的Filter的示例详解

推荐内容

客户服务热线

010-400-12345

在线客服