当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 发一个自己用JS写的实用看图工具实现代码

Javascript
jQuery代码:jQuery控制表单里的回车键
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
jQuery Flash/MP3/Video多媒体插件
9个JavaScript评级/投票插件
JS实现的radio图片选择按钮效果
IE中checkbox在刷新后初始化的问题
JavaScript 学习笔记(十一)
JS 对象介绍
javascript 哈希表(hashtable)的简单实现
jquery 防止表单重复提交代码
js parsefloat parseint 转换函数
javascript parseInt与Number函数的区别
JavaScript 学习笔记(十二) dom
JavaScript 学习笔记(十三)Dom创建表格
javascript 实现自由落体的方块效果
javascript 获取url参数和script标签中获取url参数函数代码
JAVASCRIPT style 中visibility和display之间的区别
javascript 拖放效果实现代码
jquery last-child 列表最后一项的样式
Jquery实战_读书笔记1—选择jQuery

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 88 ::
收藏到网摘: n/a

所以决定慢慢来照顾一下博客吧,这里先把眼前就有的一个小东西拿出来和大家分享一下,这是2006年的时候(文本里记下了时间,不然也忘记了)为了自己看网络图片方便而写的。  因为某些网站把内容图片以每页显示一幅的形式呈现,而每页都有大量没用的垃圾信息(广告、新闻和无关图片),非常影响看图效率。所以写了这个,只要知道第一幅图片的URL,填在本网页里,设置一下起始和结束编号,就可以显示带有数字编号的图片了,同时还有一些常用到的贴心功能。当然,对于某些网站存放的无序图片就无能为力了。
  介绍完了,下面是代码内容,希望能对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()
{
////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 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 -- 碧海情天、淹没天空的海 邮箱:[email protected]
看显示区代码javascript:alert(document.getElementById('showHere').innerHTML);
-->

平时也不注意整理,所以这个文件改过几个不同版本,发完了我才想起,曾经把hideIt()和showit()合并成一个函数(根据参数进行处理就行了),还有其它一些细节。因为对这里的编辑还不太熟,就不再改了,大家有兴趣自己试试吧。如果有什么建议能提供的话就更好了。
(更新:修改了一下,对于不存在的图片,自动隐藏,不占据显示空间——通过img的onerror事件进行处理。
另外要说的,这里现在这个代码编辑器,很容易导致编辑后的内容大乱套。我花了很长时间来改正错误的替换代码,感觉比我写这个脚本工具都累。而且,里面SPAN的生成,完全没有优化,不必要的重复数量简直惊人,希望OpenSoft开发组尽快完善。)