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查看html源文件
Nov 08 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 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 默默经典版本
2009/08/04 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
django 外键model的互相读取方法
2018/12/15 Python
python 堆和优先队列的使用详解
2019/03/05 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
会议接待欢迎词
2014/01/12 职场文书
植树节标语
2014/06/27 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL