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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jcrop基本参数一览
Jul 16 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
react 生命周期实例分析
May 18 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 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
什么是短波收听SWL
2021/03/01 无线电
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
多文件上载系统完整版
2006/10/09 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php文件读取方法实例分析
2015/06/20 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python基础教程之Hello World!
2014/08/29 Python
简单理解Python中的装饰器
2015/07/31 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
animation和transition的区别
2020/10/12 HTML / CSS
餐厅收银员岗位职责
2015/04/07 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL