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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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 MSSQL 存储过程的方法
2008/12/24 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php递归函数怎么用才有效
2018/02/24 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python Django批量导入不重复数据
2016/03/25 Python
Python实现视频下载功能
2017/03/14 Python
Apache如何部署django项目
2017/05/21 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
办公室文秘岗位职责
2013/11/15 职场文书
同事打架检讨书
2014/02/04 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript