javascript实现的图片预览功能
程序员文章站
2022-04-10 18:29:29
本文实例讲述了javascript实现的图片预览功能。分享给大家供大家参考，具体如下：
1.将下面的代码复制到内
本文实例讲述了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>中加入
复制代码 代码如下:
<div id="showimage" style="position:absolute;visibility:hidden"></div>
3.在连接图片的地方这样写
复制代码 代码如下:
<a href="photo1.jpg" rel="external nofollow" onclick="return enlarge('photo1.jpg',event)"><img src="thumbnail.gif" border="0"></a>
记得更改图片路径
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript图片操作技巧大全》、《javascript切换特效与技巧总结》、《javascript图形绘制技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 郭女王死后为什么嘴塞满糠？真相是什么