Partage de code d'implémentation de la fonction d'aperçu d'image javascript

Cet article présente principalement la fonction de prévisualisation d'image implémentée par javascript, combinée avec l'exemple form Analysé les techniques d'implémentation et les notes des fonctions liées à JavaScript. Les amis dans le besoin peuvent se référer à

Cet article décrit la fonction d'aperçu d'image implémentée par JavaScript et la partage avec vous pour votre référence. les détails sont les suivants :

1. Copiez le code suivant dans suit :

<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="&#39;+which+&#39;">&#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="&#39;+which+&#39;" border=0></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>

3. Écrivez

à l'endroit où l'image est connectée Le code est le suivant :

<p id="showimage" style="position:absolute;visibility:hidden"></p>

N'oubliez pas de changer le chemin de l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!