JS_Image 特殊効果で書かれた実用的な画像表示ツールの実装コードを送ってください

Web サイトによっては、コンテンツ画像を 1 ページに 1 つの画像として表示する場合があり、各ページには無駄なジャンク情報 (広告、ニュース、無関係な画像) が大量に含まれており、画像の閲覧効率に大きな影響を与えるためです。最初の画像の URL がわかっていれば、この Web ページに入力し、開始番号と終了番号を設定すれば、番号付きの画像を表示できます。また、よく使用される、考え抜かれた機能もいくつかあります。もちろん、一部の Web サイトに保存されている乱れた画像についてはどうすることもできません。

紹介は終わりました。以下はコードの内容です。JS 初心者の参考になれば幸いです (次のコードのすべての "'" を一重引用符に置き換えてください。形式はここにあります):

コードをコピー コードは次のとおりです:

<SCRIPT> <br>//CTRL マウスホイールで画像を拡大または縮小します: <br>function imgzoom(o) { <br> if(event.ctrlKey) { <br> varzoom = parseInt( o.style.zoom, 10) || 100; <br> ズーム -= イベント.wheelDelta / 12; <br> if(zoom > 0) { <br> o.style.zoom = ズーム '% '; <br>} <re> Return false; <br>} else {<br> Return true; <br>} <br>} <br> // ホットキーを受け取ります <br> document.onkeydown = myKey; <br> VAR IsShow=false; <br>function mykey() <br>{ <br> var key=window.event.keyCode; <br>//alert(key); ){ <br> if (IsShow) showIt(); <br> else HideIt(); // IsShow=!IsShow <br> } //45=キーを挿入,16=Shift,17=Ctrl, 18=Alt, 192=` <br> if (key==13) catchIt();//Enter,<br> を表示 if (key==186) document.getElementById('add0').checked=!document .getElementById(' add0').checked; <br>} <br><br>function HideIt() <br>{ IsShow=true; <br> //Hide<br>// document.getElementById('showHere' ).style.visibility='hidden'; //占有されている表示領域を保持します<br> document.getElementById('showHere').style.display='none'; //占有されている表示領域を再利用します<br>// .getElementById(' imgUrlBackup').innerText=document.getElementById('thePath').value; <br>// document.getElementById('thePath').value=''; function showIt() <br>{ IsShow=false; <br> //Show<br>// document.getElementById('showHere').style.visibility="visible"; <br> document.getElementById('showHere') ).style.display=""; <br>// document.getElementById('thePath').value=document.getElementById('imgUrlBackup').innerText; <br><br>関数 catchIt() <br>{ <br> ////document.write('<p><table>'); <br> showIt() <br> var sn=Number(document.getElementById('startNum').値); <br> var en=Number(document.getElementById('endNum').value); <br> var str=document.getElementById('thePath').value; <br> var IsAdd0=document.getElementById( 'add0') .checked; <br> var lastPos; <br> var Discript='<center>画像領域を非表示/表示するには、1 の横にある「`」キーを押します。画像をクリックすると元の画像が別ウィンドウで表示されます。 CTRL マウス ホイールを押して画像を拡大または縮小します。</center>; <br> var showSth='<table>'; <br> var fn=''; <br> fn=''; <br> if (IsAdd0) <br> { <br> lastPos=str.lastIndexOf('#'); <br> str=str.replace(new RegExp('#','ig'),'0'); <br> for(var n=sn;n<=en;n ) <BR> { <BR> fn=str.substring(0,lastPos-String(n).length 1) n str.substring(lastPos 1) ; <BR> showSth=showSth GetImgSrc(fn); <BR> } <BR> } <BR> else <BR> { <BR> for(var n=sn;n<=en;n ) <BR> { <BR> fn=str.replace( '#'、 n); <BR> showSth=showSth GetImgSrc(fn); <BR> } <BR> } <BR> showSth=showSth '</table>'; <br>// alert(showSth); <br> document.getElementById('showHere').innerHTML=説明書 showSth 説明書; <br> // document.refresh(); <br> IsShow=false; <br>} <br><br>function GetImgSrc(ImgUrl) <br>{ //让图片ダウンロード後自动调整显表示尺寸以适应画面，并提取文件体积信息附加提示信息上 <br> //在ネズミ标经時、ネズミ标を手の形状に設置します <br> // ネズミ标点击時、新しい窗口打开图片 <br> // ネズミ标滚轮滚動時、タッチ放出图片数 <br> // 設置图片のヒントお知らせ <br> return ' <img onerror="javascript:this.style.display='none';"  src="' ImgUrl '" onload="if(this.width >screen.width*0.7) {this.resize=true; this.width=screen.width*0.7;DispImgInfo(this);}" onmouseover=" if(this.resize) this.style.cursor='hand';" onclick="window.open(this.src);" onmousewheel="imgzoom(this) を返す;" alt="URL:' ImgUrl ' 点击=在新窗口查看,CTRL 鼠标滚轮=缩放图片" >'; <br>} <br><br>//すべての画像をサイズ文本框指定比率で実行缩放 <br>function ImgZoom(Operation) { <br> var ScaleTo=document.getElementById('thesize').value/100 ; <br> if (Operation=="toBig") {ScaleTo=1 ScaleTo;} <br> for(var i=0;i<document.images.length> { document.images[i]。 width=document.images[i].width*ScaleTo; <br> //不用改高、会自动跟随長度变化而等比变化。 <br> } <br>} <br><br><br>// 宽:' this.width ',高:' this.height ',' getImgsize(this) ' <br><br>function DispImgInfo( img) { <br> if (img.src!=null && img.src!="") <br> img.alt=img.alt " 宽:" img.width ",高:" img.height ",大小:" getImgsize(img); <br>} <br><br>function discAllimages() { <br> //getAllimages <br> for (var i=0; i<document.images.length; i ) <BR> { var img=document.画像[i]; <BR> if (img.src!=null && img.src!="") <BR> img.alt=img.alt " 宽:" img.width ",高:" img.height ",大小:" getImgsize(img); <BR> } <BR>}<br><br>function getImgsize(x) { <BR> var picSize=x.fileSize; <BR> if (picSize>1000) picSize=Math.round(picSize/1024*100)/100 'KB'; <br> else if (picSize > 0) picSize=picSize 'bytes'; <br> else picSize='unknown'; <br> return picSize; <br>} <br></SCRIPT>


Author: ZhaoLiang -- The blue sea loves the sky, the sea that drowns the sky Email: thedoc01@163.com Production time: August 2006

Function: Batch display of local or network numbers with numbers picture. Such as C:A##.gif or file:///C:/A##.gif or http://www.cctv.com/A3#.jpg

Note: If the picture name is A02 and When it is not A2, you can use ## to specify the fixed length of the number and select "Fixed zero padding", then the insufficient bits will be automatically padded with zeros)

Hotkey: `(~) key = display on /close. ;Key=switch retention zero padding. CTRL mouse wheel on the picture = zoom the picture. Click on image = opens in new window. HOME=You can go back to the beginning if the article is too long.

---

Path:
Starting number:
End number: < /INPUT>

Fixed zero padding
　



Zoom ratio (percent): (Enter to display the picture)

---

<SCRIPT> <br> document.getElementById('thePath').focus(); <br></SCRIPT>

I usually don’t pay attention to organizing it, so I changed this file to several different versions. After sending it, I remembered that I had used hideIt() and showit() Combined into a function (just process it according to the parameters), and some other details. Since I’m not familiar with the editors here, I won’t change it anymore. If you are interested, you can try it yourself. It would be great if you have any advice to offer.

(Update: Modified, for non-existing pictures, they are automatically hidden and do not occupy the display space - processed through the onerror event of img.
In addition, here is the code editor , it can easily lead to chaos in the edited content. It took me a long time to correct the wrong replacement code, which was more tiring than writing this script tool. Moreover, the SPAN generation in it was not optimized at all, and there were unnecessary repetitions. It's amazing, I hope the OpenSoft development team will improve it as soon as possible)