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 相关文章推荐
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JS实现音乐导航特效
Jan 06 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python global和nonlocal用法解析
2020/02/03 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
介绍一下linux的文件系统
2015/10/06 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书