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 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
js this 绑定机制深入详解
Apr 30 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
Windows下为Python安装Matplotlib模块
2015/11/06 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python实现AES加密和解密
2019/03/27 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Python如何读写CSV文件
2020/08/13 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
客服专员岗位职责
2014/02/28 职场文书
如何写好自荐信
2014/04/07 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers