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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
js 实现碰撞检测的示例
Oct 28 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python中optparser库用法实例详解
2018/01/26 Python
python使用matplotlib绘制热图
2018/11/07 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python netmiko模块的使用
2020/02/14 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
explicit和implicit的含义
2012/11/15 面试题
函授毕业自我鉴定
2013/12/19 职场文书
企业安全生产承诺书
2014/05/22 职场文书
应聘会计求职信
2014/06/11 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
初中地理教学反思
2016/02/19 职场文书
教你用python实现12306余票查询
2021/06/30 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js