|
|
介紹完了，下面是代碼內容，希望能對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開發組盡快完善。)
JavaScript技術：發一個自己用JS寫的實用看圖工具實現代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
