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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
JS定义类的六种方式详解
May 12 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 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
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Python如何获取文件路径/目录
2020/09/22 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
医院门卫岗位职责
2013/12/30 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL