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 字符串连接性能优化
Dec 20 Javascript
javascript Demo模态窗口
Dec 06 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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中进行身份认证
2006/10/09 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php面向对象值单例模式
2016/05/03 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue实现模态框的通用写法推荐
2018/02/26 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
Python3 处理JSON的实例详解
2017/10/29 Python
破解安装Pycharm的方法
2018/10/19 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python中实现词云图的示例
2020/12/19 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
服装行业创业计划书范文
2014/02/05 职场文书
一年级学生评语大全
2014/04/21 职场文书
党支部活动策划方案
2014/08/18 职场文书
2015年班组长工作总结
2015/04/10 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
vue elementUI批量上传文件
2022/04/26 Vue.js