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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
javascript日期计算实例分析
Jun 29 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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/02/22 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python读写二进制文件的方法
2015/05/09 Python
利用Python爬取可用的代理IP
2016/08/18 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
UNIX文件类型
2013/08/29 面试题
中学生学雷锋活动心得体会
2014/03/10 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
村委会贫困证明范文
2014/09/21 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
统计员岗位职责范本
2015/04/14 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫