JS_Image 특수효과로 작성된 실용적인 이미지 보기 도구 구현 코드를 보내주세요.

일부 웹사이트에서는 페이지당 하나의 이미지 형식으로 콘텐츠 이미지를 제공하고, 각 페이지에는 쓸모없는 정크 정보(광고, 뉴스, 관련 없는 이미지)가 다량 포함되어 이미지 보기 효율성에 큰 영향을 미치기 때문입니다. 그래서 저는 첫 번째 사진의 URL을 알고 있으면 이 웹페이지에 입력하고 시작 및 끝 번호를 설정하고 번호가 매겨진 사진을 표시할 수 있으며 일반적으로 사용되는 몇 가지 사려 깊은 기능도 있습니다. 물론, 일부 웹사이트에 저장된 무질서한 이미지에 대해 귀하가 할 수 있는 일은 없습니다.

소개가 끝났습니다. 다음은 코드 내용입니다. JS 초보자에게 도움이 되길 바랍니다. (다음 코드의 "'"를 모두 작은따옴표로 바꿔주세요. 형식은 여기에서):

코드 복사 코드는 다음과 같습니다.

<SCRIPT> <br>//CTRL 마우스 휠을 사용하여 이미지 확대 또는 축소: <br>function imgzoom(o) { <br> if(event.ctrlKey) { <br> var Zoom = parsInt( o.style.zoom, 10) || 100; <br> Zoom -= event.wheelDelta / 12 <br> if(zoom > 0) { <br> o.style.zoom = 줌 '% '; <br>} <re> false를 반환합니다. <br>} else {<br> true를 반환합니다. <br>} <br>} <br> // 단축키 수신 <br> document.onkeydown = myKey; <br> VAR IsShow=false; <br>function mykey() <br>{ <br> var key=window.event.keyCode <br>// 경고(key) <br> if (key==192 ){ <br> if (IsShow) showIt(); <br> else hideIt() <br>// 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> //표시<br>// document.getElementById('showHere').style.visibility="visible" <br> document.getElementById('showHere' ).style.display=""; <br>// document.getElementById('thePath').value=document.getElementById('imgUrlBackup').innerText; <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>이미지 영역을 숨기거나 표시하려면 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>        { '#', N); <BR>            showSth=showSth GetImgSrc(fn); <BR>        } <BR>    } <BR>    showSth=showSth '</table>'; <br>//    alert(showSth); <br>    document.getElementById('showHere').innerHTML=디스크립트 showSth Discript; <br>    //    document.refresh(); <br>    IsShow=false; <br>} <br><br>함수 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='손';" 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]. 너비=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'; 🎜> 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 개발팀에서 하루빨리 개선해 나가기를 바랍니다.)