자바스크립트로 구현된 이미지 미리보기 기능

이번 글은 자바스크립트로 구현한 이미지 미리보기 기능을 주로 소개하고, 이미지 미리보기 관련 기능에 대한 자바스크립트의 구현 기법과 주의사항을 예시 형태로 분석한 글입니다. 필요하신 분들은 참고하시기 바랍니다

기사에서는 자바스크립트 예제를 구현한 사진 미리보기 기능을 설명합니다. 참고용으로 모든 사람과 공유하세요.

1. 다음 코드를

<script>
/*
Thumbnail image viewer-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100&#39;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=&#39;<img  src="/static/imghwm/default1.png"  data-src="&#39;+which+&#39;"  class="lazy"   alt="자바스크립트로 구현된 이미지 미리보기 기능" >&#39;
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(&#39;<a href="#" rel="external nofollow" onMouseover="drag_dropns(showimage)"><img  src="/static/imghwm/default1.png"  data-src="&#39;+which+&#39;"  class="lazy"   border=0 alt="자바스크립트로 구현된 이미지 미리보기 기능" ></a>&#39;)
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(&#39;photo1.jpg&#39;,event)">
<img  src="/static/imghwm/default1.png"  data-src="thumbnail.gif"  class="lazy"   border="0" alt="자바스크립트로 구현된 이미지 미리보기 기능" >
</a>

이미지 경로를 변경하세요.

위 내용은 이 장의 전체 내용입니다. 튜토리얼을 보려면 JavaScript 동영상 튜토리얼을 방문하세요!