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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
JavaScript实现区块链
Mar 14 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
Weblogc domain问题
2014/01/27 面试题
特色冷饮店创业计划书
2014/01/28 职场文书
师范大学生求职信
2014/06/13 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2014年终工作总结范本
2014/12/15 职场文书
解除处分决定书
2015/06/25 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016党员入党决心书
2015/09/22 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL