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

2014-03-05 46

将图片查询出来之后,还需要加一个查看大图的功能,于是就用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文章

在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 44
简约JS日历控件 实例代码
Jul 12 48
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 45
详谈JS中实现种子随机数及作用
Jul 19 55
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 43
利用npm 安装删除模块的方法
May 15 44
JavaScript从原型到原型链深入理解
Jun 03 54
手机访问当前页面