이번 글은 자바스크립트로 구현한 이미지 미리보기 기능을 주로 소개하고, 이미지 미리보기 관련 기능에 대한 자바스크립트의 구현 기법과 주의사항을 예시 형태로 분석한 글입니다. 필요하신 분들은 참고하시기 바랍니다
기사에서는 자바스크립트 예제를 구현한 사진 미리보기 기능을 설명합니다. 참고용으로 모든 사람과 공유하세요.
1. 다음 코드를
<script> /* Thumbnail image viewer- ?Dynamic Drive (www.dynamicdrive.com) For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ function enlarge(which,e){ //Render image code for IE 4+ if (document.all){ if (showimage.style.visibility=="hidden"){ showimage.style.left=document.body.scrollLeft+event.clientX showimage.style.top=document.body.scrollTop+event.clientY showimage.innerHTML='<img src="'+which+'">' showimage.style.visibility="visible" } else showimage.style.visibility="hidden" return false } //Render image code for NS 4 else if (document.layers){ if (document.showimage.visibility=="hide"){ document.showimage.document.write('<a href="#" rel="external nofollow" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>') document.showimage.document.close() document.showimage.left=e.x document.showimage.top=e.y document.showimage.visibility="show" } else document.showimage.visibility="hide" return false } //if NOT IE 4+ or NS 4, simply display image in full browser window else return true } </script> <script language="JavaScript1.2"> //By Dynamicdrive.com //drag drop function for NS 4//// ///////////////////////////////// var nsx var nsy var nstemp function drag_dropns(name){ temp=eval(name) temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) temp.onmousedown=gons temp.onmousemove=dragns temp.onmouseup=stopns } function gons(e){ temp.captureEvents(Event.MOUSEMOVE) nsx=e.x nsy=e.y } function dragns(e){ temp.moveBy(e.x-nsx,e.y-nsy) return false } function stopns(){ temp.releaseEvents(Event.MOUSEMOVE) } //drag drop function for IE 4+//// ///////////////////////////////// var dragapproved=false function drag_dropie(){ if (dragapproved==true){ document.all.showimage.style.pixelLeft=tempx+event.clientX-iex document.all.showimage.style.pixelTop=tempy+event.clientY-iey return false } } function initializedragie(){ if (event.srcElement.parentElement.id=="showimage"){ iex=event.clientX iey=event.clientY tempx=showimage.style.pixelLeft tempy=showimage.style.pixelTop dragapproved=true document.onmousemove=drag_dropie } } if (document.all){ document.onmousedown=initializedragie document.onmouseup=new Function("dragapproved=false") } </script>
에 복사합니다. 2.
을 에 추가합니다. ;<p id="showimage" style="position:absolute;visibility:hidden"></p>
3. 이미지를 연결하는 곳에 이렇게 작성하세요.
<a href="photo1.jpg" rel="external nofollow" onClick="return enlarge('photo1.jpg',event)"> <img src="thumbnail.gif" border="0"> </a>
이미지 경로를 변경하세요.
위 내용은 이 장의 전체 내용입니다. 튜토리얼을 보려면 JavaScript 동영상 튜토리얼을 방문하세요!