html预览图片的功能,javascript实现的图片预览功能

本文实例讲述了javascript实现的图片预览功能。分享给大家供大家参考，具体如下：

1.将下面的代码复制到

内

/*

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=''

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('')

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

}

//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.οnmοusedοwn=gons

temp.οnmοusemοve=dragns

temp.οnmοuseup=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.οnmοusemοve=drag_dropie

}

}

if (document.all){

document.οnmοusedοwn=initializedragie

document.οnmοuseup=new Function("dragapproved=false")

}

2.在

中加入

3.在连接图片的地方这样写

记得更改图片路径

希望本文所述对大家JavaScript程序设计有所帮助。