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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
vue 实现购物车总价计算
Nov 06 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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
详解Window7 下开发php扩展
2015/12/31 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
javascript中如何判断类型汇总
2019/05/14 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
高三历史教学反思
2014/01/09 职场文书
银行类自荐信
2014/02/04 职场文书
策划创业计划书
2014/02/06 职场文书
售后服务承诺书范文
2014/03/26 职场文书
擅自离岗检讨书
2014/09/12 职场文书
银行授权委托书样本
2014/10/13 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
golang生成并解析JSON
2022/04/14 Golang