|
|
介紹完了，下面是代碼內(nèi)容，希望能對(duì)JS新手們有點(diǎn)幫助吧(請(qǐng)自行把下面代碼里所有的“'”替換為單引號(hào)。我對(duì)這里這個(gè)格式實(shí)在沒(méi)轍了)：
復(fù)制代碼 代碼如下:
<SCRIPT>
//CTRL+鼠標(biāo)滾輪放大或縮小圖片：
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旁邊的“`”鍵可隱藏/顯示圖片區(qū)域。點(diǎn)擊圖片可在新窗口查看原圖。CTRL+鼠標(biāo)滾輪可放大或縮小圖片。</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)
{ //讓圖片載入后自動(dòng)調(diào)整顯示尺寸以適應(yīng)屏幕，并提取文件體積信息附加到提示信息上
//在鼠標(biāo)經(jīng)過(guò)時(shí)，設(shè)置鼠標(biāo)為手形狀
//在鼠標(biāo)點(diǎn)擊時(shí)，在新窗口打開圖片
//鼠標(biāo)滾輪滾動(dòng)時(shí)，觸發(fā)縮放圖片函數(shù)
//設(shè)置圖片的提示信息
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 + ' 點(diǎn)擊=在新窗口查看,CTRL+鼠標(biāo)滾輪=縮放圖片" >';
}
//把所有圖片按thesize文本框指定比例進(jìn)行縮放
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;
//不用改變高度,會(huì)自動(dòng)跟隨長(zhǎng)度變化而等比變化.
}
}
// 寬:'+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+'字節(jié)';
else picSize='未知';
return picSize;
}
</SCRIPT>
作者：ZhaoLiang -- 碧海情天、淹沒(méi)天空的海 郵箱：thedoc01@163.com 制作時(shí)間：2006年8月
<BR>功能：批量顯示帶數(shù)字編號(hào)的本地或網(wǎng)絡(luò)圖片。如 C:A##.gif 或 file:///C:/A##.gif 或 http://www.cctv.com/A3#.jpg
<BR>說(shuō)明：如圖片名稱是A02而非A2時(shí),可用##指定編號(hào)的固定長(zhǎng)度并選擇“固位補(bǔ)零”,則不足位的會(huì)自動(dòng)用0補(bǔ)齊)
<BR>熱鍵：`(~)鍵=顯示開/關(guān)。；鍵=開關(guān)固位補(bǔ)零。圖片上CTRL+鼠標(biāo)滾輪=縮放圖片。點(diǎn)擊圖片=在新窗口打開。HOME=篇幅較長(zhǎng)時(shí)可返回開頭。
<HR>
路徑：<INPUT id='thePath' style="apos: " type='text'></INPUT>
起始編號(hào)：<INPUT id='startNum' style="apos: " type='text'></INPUT>
結(jié)束編號(hào)：<INPUT id='endNum' style="apos: " type='text'></INPUT><BR>
<INPUT id='add0' type='checkbox'></INPUT>固位補(bǔ)零
<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 -- 碧海情天、淹沒(méi)天空的海 郵箱：thedoc01@163.com
看顯示區(qū)代碼Javascript:alert(document.getElementById('showHere').innerHTML);
-->
平時(shí)也不注意整理，所以這個(gè)文件改過(guò)幾個(gè)不同版本，發(fā)完了我才想起，曾經(jīng)把hideIt()和showit()合并成一個(gè)函數(shù)（根據(jù)參數(shù)進(jìn)行處理就行了），還有其它一些細(xì)節(jié)。因?yàn)閷?duì)這里的編輯還不太熟，就不再改了，大家有興趣自己試試吧。如果有什么建議能提供的話就更好了。
(更新：修改了一下，對(duì)于不存在的圖片，自動(dòng)隱藏，不占據(jù)顯示空間――通過(guò)img的onerror事件進(jìn)行處理。
另外要說(shuō)的，這里現(xiàn)在這個(gè)代碼編輯器，很容易導(dǎo)致編輯后的內(nèi)容大亂套。我花了很長(zhǎng)時(shí)間來(lái)改正錯(cuò)誤的替換代碼，感覺(jué)比我寫這個(gè)腳本工具都累。而且，里面SPAN的生成，完全沒(méi)有優(yōu)化，不必要的重復(fù)數(shù)量簡(jiǎn)直驚人，希望OpenSoft開發(fā)組盡快完善。)
JavaScript技術(shù)：發(fā)一個(gè)自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
