javascript实现的图片预览功能

 更新时间:2017年03月25日 12:05:15   作者:ITshu  
这篇文章主要介绍了javascript实现的图片预览功能,结合实例形式分析了javascript针对图片预览相关功能实现技巧与注意事项,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • Bootstrap图片轮播组件Carousel使用方法详解

    Bootstrap图片轮播组件Carousel使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap图片轮播组件Carousel使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 微信小程序onShareTimeline()实现分享朋友圈

    微信小程序onShareTimeline()实现分享朋友圈

    这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • javascript将数字转换整数金额大写的方法

    javascript将数字转换整数金额大写的方法

    这篇文章主要介绍了javascript将数字转换整数金额大写的方法,通过自定义函数中的数组替换实现数字转换整数金额大写的功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • js获取和设置属性的方法

    js获取和设置属性的方法

    本篇文章主要是对js获取和设置属性的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript实现敏感信息脱敏的示例代码

    JavaScript实现敏感信息脱敏的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现敏感信息脱敏,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 运用js教你轻松制作html音乐播放器

    运用js教你轻松制作html音乐播放器

    这篇文章主要为大家详细介绍了如何运用js教你轻松制作html音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS刷新当前页面的几种方法总结

    JS刷新当前页面的几种方法总结

    本篇文章主要是对JS刷新当前页面的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript 中比较字符串的 4 种方法示例详解

    JavaScript 中比较字符串的 4 种方法示例详解

    这篇文章主要介绍了在 JavaScript 中比较字符串的 4 种方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • 利用JS生成博文目录及CSS定制博客

    利用JS生成博文目录及CSS定制博客

    这篇文章主要介绍了利用JS生成博文目录及CSS定制博客的相关资料,需要的朋友可以参考下
    2016-02-02
  • 解析Javascript中中括号“[]”的多义性

    解析Javascript中中括号“[]”的多义性

    这篇文章主要介绍了Javascript中中括号“[]”的多义性。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论