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 相关文章推荐
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
关于js陀螺仪的理解分析
Apr 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 4.2书写安全的脚本
2006/10/09 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python3大文件解压和基本操作
2017/12/15 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python中shell执行知识点
2020/05/06 Python
中西医专业毕业生职业规划书
2014/02/24 职场文书
就业协议书范本
2014/04/11 职场文书
青奥会口号
2014/06/12 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015年教师节感言
2015/08/03 职场文书
高中团支书竞选稿
2015/11/21 职场文书
高中政治教师教学反思
2016/02/23 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript