javascript实现的图片预览功能


Posted in Javascript onMarch 25, 2017

本文实例讲述了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中“+=”的应用
Feb 02 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
js点击选择文本的方法
Feb 09 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 #Javascript
bootstrap table动态加载数据示例代码
Mar 25 #Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 #Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 #Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 #Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 #Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
You might like
给php新手谈谈我的学习心得
2007/02/25 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python实现计算倒数的方法
2015/07/11 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
岗位职责的含义
2013/11/17 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
少年闰土教学反思
2014/02/22 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
优秀家长事迹材料
2014/05/17 职场文书
英语专业自荐书
2014/06/13 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
无工作证明怎么写
2015/06/15 职场文书
环保建议书作文500字
2015/09/14 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书