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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
vuex 的简单使用
Mar 22 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
Vue父子之间值传递的实例教程
Jul 02 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中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue项目实战总结篇
2018/02/11 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python调用外部程序的实操步骤
2019/03/04 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python批量启动多线程代码实例
2020/02/18 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
国培计划培训感言
2014/03/11 职场文书
企业整改报告范文
2014/11/08 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
无工作证明怎么写
2015/06/15 职场文书
您对思维方式了解多少?
2019/12/09 职场文书