微客导航 » 文章资讯 » javascript实现的图片预览功能

javascript实现的图片预览功能

2024-02-26 21:01:03 128

本文实例讲述了javascript实现的图片预览功能。分享给大家供大家参考，具体如下：

1.将下面的代码复制到内



//ByDynamicdrive.com
//dragdropfunctionforNS4////
/////////////////////////////////
varnsx
varnsy
varnstemp
functiondrag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
functiongons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
functiondragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
returnfalse
}
functionstopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//dragdropfunctionforIE4+////
/////////////////////////////////
vardragapproved=false
functiondrag_dropie(){
if(dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
returnfalse
}
}
functioninitializedragie(){
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=newFunction("dragapproved=false")
}

2.在中加入

3.在连接图片的地方这样写

记得更改图片路径

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript图形绘制技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

javascript实现的图片预览功能

热门推荐

随机推荐