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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
JS实现时间校验的代码
May 25 Javascript
浅谈es6中的元编程
Dec 01 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 Stream_*系列函数
2010/08/01 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP asXML()函数讲解
2019/02/03 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
厨师长岗位职责
2014/03/02 职场文书
领导接待方案
2014/03/13 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
怎样写观后感
2015/06/19 职场文书
寒假生活随笔
2015/08/15 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android