本文实例讲述了javascript实现的图片预览功能。分享给大家供大家参考,具体如下:
1.将下面的代码复制到<head>内
<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.clientx showimage.style.top=document.body.scrolltop+event.clienty showimage.innerhtml='<img src="'+which+'">' 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('<a href="#" rel="external nofollow" onmouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>') 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.在<body>中加入
3.在连接图片的地方这样写
记得更改图片路径
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript图片操作技巧大全》、《javascript切换特效与技巧总结》、《javascript图形绘制技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
JS 浅拷贝——Shallow copy 在 Canvas 绘图中的应用
网友评论