js写的方法实现上传图片之后查看大图


Posted in Javascript onMarch 05, 2014

将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。

显示大图和隐藏大图的js代码:

<script type="text/javascript"> 
//显示图片 
function over(imgid,obj,imgbig) 
{ 
//大图显示的最大尺寸 4比3的大小 400 300 
maxwidth=400; 
maxheight=300; //显示 
obj.style.display=""; 
imgbig.src=imgid.src; 

//1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3 
//2、如果宽超过了并且高没有超,设置宽为最大值 
//3、如果宽没超过并且高超过了,设置高为最大值 
if(img.width>maxwidth&&img.height>maxheight) 
{ 
pare=(img.width-maxwidth)-(img.height-maxheight); 
if(pare>=0) 
img.width=maxwidth; 
else 
img.height=maxheight; 
} 
else if(img.width>maxwidth&&img.height<=maxheight) 
{ 
img.width=maxwidth; 
} 
else if(img.width<=maxwidth&&img.height>maxheight) 
{ 
img.height=maxheight; 
} 
} 
//隐藏图片 
function out() 
{ 
document.getElementById('divImage').style.display="none"; 
} 
</script>

显示小图的image和显示大图的image:
<img id="img" src="你的图片地址" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" /> <%--显示大图标的区域--%> 
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute"> 
<img id="imgbig" src="~/Images/noImage.gif" alt="预览" /> 
</div>
Javascript 相关文章推荐
javascript中xml操作实现代码
Nov 21 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 #Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 #Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 #Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 #Javascript
js时间比较示例分享(日期比较)
Mar 05 #Javascript
对于Form表单reset方法的新认识
Mar 05 #Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 #Javascript
You might like
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python中请不要再用re.compile了
2019/06/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
卖车协议书范例
2014/09/16 职场文书
清洁员岗位职责
2015/02/15 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
军训后的感想
2015/08/07 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
openstack中的rpc远程调用的方法
2021/07/09 Python
Python Django模型详解
2021/10/05 Python