發(fā)一個(gè)自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼
更新時(shí)間：2008年07月26日 13:15:12 作者：
所以決定慢慢來照顧一下博客吧，這里先把眼前就有的一個(gè)小東西拿出來和大家分享一下，這是2006年的時(shí)候（文本里記下了時(shí)間，不然也忘記了）為了自己看網(wǎng)絡(luò)圖片方便而寫的。
因?yàn)槟承┚W(wǎng)站把內(nèi)容圖片以每頁顯示一幅的形式呈現(xiàn)，而每頁都有大量沒用的垃圾信息(廣告、新聞和無關(guān)圖片)，非常影響看圖效率。所以寫了這個(gè)，只要知道第一幅圖片的URL，填在本網(wǎng)頁里，設(shè)置一下起始和結(jié)束編號(hào)，就可以顯示帶有數(shù)字編號(hào)的圖片了，同時(shí)還有一些常用到的貼心功能。當(dāng)然，對(duì)于某些網(wǎng)站存放的無序圖片就無能為力了。
介紹完了，下面是代碼內(nèi)容，希望能對(duì)JS新手們有點(diǎn)幫助吧(請(qǐng)自行把下面代碼里所有的“'”替換為單引號(hào)。我對(duì)這里這個(gè)格式實(shí)在沒轍了)：
<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)過時(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)跟隨長度變化而等比變化.
}
}
// 寬:'+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 -- 碧海情天、淹沒天空的海 郵箱：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>說明：如圖片名稱是A02而非A2時(shí),可用##指定編號(hào)的固定長度并選擇“固位補(bǔ)零”,則不足位的會(huì)自動(dòng)用0補(bǔ)齊)
<BR>熱鍵：`(~)鍵=顯示開/關(guān)。；鍵=開關(guān)固位補(bǔ)零。圖片上CTRL+鼠標(biāo)滾輪=縮放圖片。點(diǎn)擊圖片=在新窗口打開。HOME=篇幅較長時(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 -- 碧海情天、淹沒天空的海 郵箱：thedoc01@163.com
看顯示區(qū)代碼javascript:alert(document.getElementById('showHere').innerHTML);
-->
平時(shí)也不注意整理，所以這個(gè)文件改過幾個(gè)不同版本，發(fā)完了我才想起，曾經(jīng)把hideIt()和showit()合并成一個(gè)函數(shù)（根據(jù)參數(shù)進(jìn)行處理就行了），還有其它一些細(xì)節(jié)。因?yàn)閷?duì)這里的編輯還不太熟，就不再改了，大家有興趣自己試試吧。如果有什么建議能提供的話就更好了。
(更新：修改了一下，對(duì)于不存在的圖片，自動(dòng)隱藏，不占據(jù)顯示空間——通過img的onerror事件進(jìn)行處理。
另外要說的，這里現(xiàn)在這個(gè)代碼編輯器，很容易導(dǎo)致編輯后的內(nèi)容大亂套。我花了很長時(shí)間來改正錯(cuò)誤的替換代碼，感覺比我寫這個(gè)腳本工具都累。而且，里面SPAN的生成，完全沒有優(yōu)化，不必要的重復(fù)數(shù)量簡直驚人，希望OpenSoft開發(fā)組盡快完善。)
介紹完了，下面是代碼內(nèi)容，希望能對(duì)JS新手們有點(diǎn)幫助吧(請(qǐng)自行把下面代碼里所有的“'”替換為單引號(hào)。我對(duì)這里這個(gè)格式實(shí)在沒轍了)：
復(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)過時(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)跟隨長度變化而等比變化.
}
}
// 寬:'+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 -- 碧海情天、淹沒天空的海 郵箱：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>說明：如圖片名稱是A02而非A2時(shí),可用##指定編號(hào)的固定長度并選擇“固位補(bǔ)零”,則不足位的會(huì)自動(dòng)用0補(bǔ)齊)
<BR>熱鍵：`(~)鍵=顯示開/關(guān)。；鍵=開關(guān)固位補(bǔ)零。圖片上CTRL+鼠標(biāo)滾輪=縮放圖片。點(diǎn)擊圖片=在新窗口打開。HOME=篇幅較長時(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 -- 碧海情天、淹沒天空的海 郵箱：thedoc01@163.com
看顯示區(qū)代碼javascript:alert(document.getElementById('showHere').innerHTML);
-->
平時(shí)也不注意整理，所以這個(gè)文件改過幾個(gè)不同版本，發(fā)完了我才想起，曾經(jīng)把hideIt()和showit()合并成一個(gè)函數(shù)（根據(jù)參數(shù)進(jìn)行處理就行了），還有其它一些細(xì)節(jié)。因?yàn)閷?duì)這里的編輯還不太熟，就不再改了，大家有興趣自己試試吧。如果有什么建議能提供的話就更好了。
(更新：修改了一下，對(duì)于不存在的圖片，自動(dòng)隱藏，不占據(jù)顯示空間——通過img的onerror事件進(jìn)行處理。
另外要說的，這里現(xiàn)在這個(gè)代碼編輯器，很容易導(dǎo)致編輯后的內(nèi)容大亂套。我花了很長時(shí)間來改正錯(cuò)誤的替換代碼，感覺比我寫這個(gè)腳本工具都累。而且，里面SPAN的生成，完全沒有優(yōu)化，不必要的重復(fù)數(shù)量簡直驚人，希望OpenSoft開發(fā)組盡快完善。)
相關(guān)文章
符合web標(biāo)準(zhǔn)的連續(xù)滾動(dòng)圖像的js代碼
符合web標(biāo)準(zhǔn)的連續(xù)滾動(dòng)圖像的js代碼...2007-02-02
鼠標(biāo)放上去圖片明亮顯示，不錯(cuò)的js效果2008-05-05
純CSS實(shí)現(xiàn)的當(dāng)鼠標(biāo)移上圖片添加陰影效果代碼
這個(gè)效果挺實(shí)用，當(dāng)把鼠標(biāo)放到一幅靜止的圖片上，圖片的四周邊框會(huì)出現(xiàn)陰影，具有立體感的效果，代碼是第二次修正，能適應(yīng)大小不同的圖片，值得大家嘗試一用哦。2009-12-12![JavaScript圖片放大鏡效果代碼[代碼比較簡單]](http://img.jbzj.com/images/xgimg/bcimg3.png)
實(shí)用漂亮的放大鏡效果，基于JavaScript代碼實(shí)現(xiàn)，貌似代碼不太多，但效果確實(shí)不錯(cuò)，因調(diào)用的圖片比較大，所以運(yùn)行效果后請(qǐng)稍等一會(huì)，等待圖片加載。2011-02-02
3張圖片循環(huán)組和(很有動(dòng)感)...2006-07-07
用javascript實(shí)現(xiàn)圖片馬賽克后顯示并切換
用javascript實(shí)現(xiàn)圖片馬賽克后顯示并切換...2007-04-04
用戶上傳照片，照片的尺寸未知；需要生成一個(gè)預(yù)覽，這個(gè)預(yù)覽圖要根據(jù)提供給用戶預(yù)覽的區(qū)域自應(yīng)用，并且居中；如果圖片太大，需要按比例縮放2011-10-10
比較罕見的javascript雙向放大縮小圖片效果代碼，鼠標(biāo)上下移動(dòng)即可看到效果2008-05-05
用javascript實(shí)現(xiàn)旋轉(zhuǎn)圖片效果的代碼
用javascript實(shí)現(xiàn)旋轉(zhuǎn)圖片效果的代碼...2007-11-11
非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
一個(gè)效果如果沒有一個(gè)合理的布局，是很難作出來的，所以布局是非常重要的基礎(chǔ)！ 下邊的效果，是試著假設(shè)在布局我無法改的情況下，能過外邊的CSS或Javascript來實(shí)現(xiàn)一個(gè)滑動(dòng)圖片效果！2009-04-04