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 相关文章推荐
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
js评分组件使用详解
Jun 06 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
Nuxt页面级缓存的实现
Mar 09 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
js微信支付实现代码
2016/12/22 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python获取当前时间的方法
2014/01/14 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
2014年五一促销活动方案
2014/03/09 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
岳麓书院导游词
2015/02/03 职场文书
病危通知书样本
2015/04/17 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
R9700摩机记
2022/04/05 无线电