这篇文章主要介绍了javascript实现的图片预览功能,结合实例形式分析了javascript针对图片预览相关功能实现技巧与注意事项,需要的朋友可以参考下
本文实例讲述了javascript实现的图片预览功能。分享给大家供大家参考，具体如下：
1.将下面的代码复制到93f0f5c25f18dab9d176bd4f6de5d30e内
<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.clientxshowimage.style.top=document.body.scrolltop+event.clientyshowimage.innerhtml='<img src="'+which+'">'showimage.style.visibility="visible"}elseshowimage.style.visibility="hidden"return false}//render image code for ns 4else 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.xdocument.showimage.top=e.ydocument.showimage.visibility="show"}elsedocument.showimage.visibility="hide"return false}//if not ie 4+ or ns 4, simply display image in full browser windowelsereturn true}</script><script language="javascript1.2">//by dynamicdrive.com//drag drop function for ns 4/////////////////////////////////////var nsxvar nsyvar nstempfunction drag_dropns(name){temp=eval(name)temp.captureevents(event.mousedown | event.mouseup)temp.onmousedown=gonstemp.onmousemove=dragnstemp.onmouseup=stopns}function gons(e){temp.captureevents(event.mousemove)nsx=e.xnsy=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=falsefunction drag_dropie(){if (dragapproved==true){document.all.showimage.style.pixelleft=tempx+event.clientx-iexdocument.all.showimage.style.pixeltop=tempy+event.clienty-ieyreturn false}}function initializedragie(){if (event.srcelement.parentelement.id=="showimage"){iex=event.clientxiey=event.clientytempx=showimage.style.pixellefttempy=showimage.style.pixeltopdragapproved=truedocument.onmousemove=drag_dropie}}if (document.all){document.onmousedown=initializedragiedocument.onmouseup=new function("dragapproved=false")}</script>
2.在<body>中加入
<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视频教程！