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实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
jQuery插件之validation插件
Mar 29 jQuery
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
用PHP4访问Oracle815
2006/10/09 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
90后毕业生的求职信范文
2013/09/21 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
辞职信的写法
2015/02/27 职场文书
清明节主题班会
2015/08/14 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
如何用python反转图片,视频
2021/04/24 Python