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 相关文章推荐
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jQuery基础知识小结
Dec 22 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
如何使用Strace调试工具
2013/06/03 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python 函数返回值的示例代码
2019/03/11 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
pandas针对excel处理的实现
2021/01/15 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
《都江堰》教学反思
2014/02/07 职场文书
企业消防安全责任书
2014/07/23 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
公司市场部岗位职责
2015/04/15 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python