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 树控件 比较好用
Jun 11 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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 反射机制实现动态代理的代码
2008/10/22 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
python 编码规范整理
2018/05/05 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
国贸专业自荐信范文
2014/03/02 职场文书
意向协议书范本
2014/04/23 职场文书
优秀员工评优方案
2014/06/13 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
vue项目支付功能代码详解
2022/02/18 Vue.js