Implementation code sharing of javascript image preview function

This article mainly introduces the image preview function implemented by javascript, combined with the example form Analyzed the implementation skills and precautions of JavaScript related functions. Friends in need can refer to the following

. This article describes the image preview function implemented by JavaScript and shares it with you for your reference. The details are as follows:

1. Copy the following code into

<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="Implementation code sharing of javascript image preview function" >&#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="Implementation code sharing of javascript image preview function" ></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. Add

code in

as follows:

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

3. Write like this

where the picture is connected. The code is as follows:

<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="Implementation code sharing of javascript image preview function" ></a>

Remember to change the picture path

The above is the detailed content of Implementation code sharing of javascript image preview function. For more information, please follow other related articles on the PHP Chinese website!