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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
React中的Context应用场景分析
Jun 11 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 第二节 数据类型之字符串类型
2012/04/28 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
JavaScript实现图片轮播特效
2019/10/23 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python错误的处理方法
2020/06/23 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
上课迟到检讨书
2014/02/19 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
食品安全宣传标语
2014/06/07 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年接待工作总结
2014/11/26 职场文书
2015元旦节寄语
2014/12/08 职场文书
初中同学会致辞
2015/08/01 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技