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 用Node.js写Shell脚本[译]
Sep 20 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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下实现折线图效果的代码
2007/04/28 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php实现的日历程序
2015/06/18 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
Vue表单及表单绑定方法
2018/09/04 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python字符串的常用操作方法小结
2016/05/21 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
NULL是什么,它是怎么定义的
2015/05/09 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
港湾网络笔试题
2014/04/19 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
大学社团计划书
2014/05/01 职场文书
浅谈python中的多态
2021/06/15 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技