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中null与undefined分析
Jul 25 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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
phpmyadmin的#1251问题
2006/11/25 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php取得字符串首字母的方法
2015/03/25 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
详解微信UnionID作用
2019/05/15 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
django数据库migrate失败的解决方法解析
2018/02/08 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python程序文件扩展名知识点详解
2020/02/27 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
党支部创先争优活动总结
2014/08/28 职场文书
销售助理岗位职责
2015/02/11 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
校长新学期寄语2016
2015/12/04 职场文书
教师个人教学反思
2016/02/23 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技