欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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程序设计有所帮助。