Send me a practical image viewing tool implementation code written in JS_Image special effects

Because some websites present content images in the form of one image per page, and each page contains a large amount of useless junk information (advertising, news and irrelevant images), which greatly affects the efficiency of viewing images. So I wrote this. As long as you know the URL of the first picture, fill it in this webpage, set the start and end numbers, you can display pictures with numbered numbers, and there are also some commonly used and thoughtful functions. Of course, there is nothing you can do about the disordered images stored on some websites.

The introduction is over, the following is the code content, I hope it can be helpful to JS novices (please replace all the "'" in the following code with single quotes. I really have no idea about the format here):

Copy code The code is as follows:

<SCRIPT> <br>//CTRL mouse wheel to zoom in or out the image: <br>function imgzoom(o) { <br> if(event.ctrlKey) { <br> var zoom = parseInt( o.style.zoom, 10) || 100; <br> zoom -= event.wheelDelta / 12; <br> if(zoom > 0) { <br> o.style.zoom = zoom '%'; <br>} <re> Return false; <br>} else {<br> Return true; <br>} <br>} <br> // Receive the hot key <br> document.onkeydown = myKey; <br> VAR IsShow=false; <br>function mykey() <br>{ <br> var key=window.event.keyCode; <br>// alert(key); <br> if (key==192){ <br> if (IsShow) showIt(); <br> else hideIt(); <br>// IsShow=!IsShow; <br> } //45=Insert key,16=Shift,17=Ctrl,18=Alt, 192=` <br> if (key==13) catchIt();//Enter,to display <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'; //Retain the occupied display area<br> document.getElementById('showHere').style.display='none'; //Recycle the occupied display area<br>// document.getElementById(' imgUrlBackup').innerText=document.getElementById('thePath').value; <br>// document.getElementById('thePath').value=''; <br>} <br><br>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><br>function catchIt() <br>{ <br> ////document.write('<p><table>'); <br> showIt() <br> var sn=Number(document.getElementById('startNum').value); <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>Press the "`" key next to 1 to hide/show the image area. Click on the image to view the original image in a new window. CTRL mouse wheel to zoom in or out of the image.</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=Discript showSth Discript; <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.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 鼠标滚轮=缩放图片" >'; <br>} <br><br>//把所有图片按thesize文本框指定比例进行缩放 <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;i ) <BR>    {    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.images[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'; 🎜> else if (picSize > 0) picSize=picSize 'bytes'; <br> else picSize='unknown'; <br> return picSize; <br></SCRIPT> >
저자: ZhaoLiang -- 푸른 바다는 하늘을 사랑하고, 바다는 하늘을 익사시킨다. 이메일: thedoc01@163.com 제작 시기: 2006년 8월

기능: 지역 번호 또는 네트워크 번호 일괄 표시 숫자 그림으로. 예: C:A##.gif 또는 file:///C:/A##.gif 또는 http://www.cctv.com/A3#.jpg

참고: 사진 이름이 다음과 같은 경우 A02 및 A2가 아닌 경우 ##을 사용하여 숫자의 고정 길이를 지정하고 "Fixed zero padding"을 선택할 수 있습니다. 그러면 부족한 비트는 자동으로 0으로 채워집니다.)

핫키: ` (~) 키 = 표시/닫기. ;키=스위치 유지 제로 패딩. 사진 위에서 CTRL 마우스 휠 = 사진을 확대/축소합니다. 이미지 클릭 = 새창에서 열립니다. HOME=글이 너무 길면 처음으로 돌아갈 수 있습니다.

---

경로:
시작 번호:
끝 번호: INPUT>

제로 패딩 수정
　


확대/축소 비율(퍼센트): (사진을 표시하려면 Enter를 누르세요)

---

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



평소 정리에 신경쓰지 않아서 이 파일을 여러 버전으로 변경해 봤습니다. hideIt()과 showit()을 함수로 결합하고(매개변수에 따라 처리함) 기타 세부 사항을 사용했던 것이 기억났습니다. 여기 편집자들에 대해 잘 모르기 때문에 더 이상 바꾸지 않겠습니다. 관심이 있으시면 직접 시도해 보세요. 해줄 수 있는 조언이 있다면 좋을 것 같습니다.

(업데이트: 수정됨, 존재하지 않는 사진의 경우 자동으로 숨겨져 표시 공간을 차지하지 않습니다. img의 onerror 이벤트를 통해 처리됩니다.
또한 여기에 코드 편집기가 있습니다. 잘못된 대체 코드를 수정하는 데 시간이 오래 걸리고 이 스크립트 도구를 작성하는 것보다 더 피곤하며, 그 안에 있는 SPAN 생성이 전혀 최적화되지 않았고 불필요한 부분도 있었습니다. 정말 놀랍습니다. OpenSoft 개발팀에서 하루빨리 개선해 나가기를 바랍니다.)