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 相关文章推荐
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
JS实现可控制的进度条
Mar 25 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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支持中文字符串分割的函数
2015/05/28 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python对List中的元素排序的方法
2018/04/01 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python面向对象程序设计示例小结
2019/01/30 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python 绘制国旗的示例
2020/09/27 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
2015年初中生自我评价范文
2015/03/03 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
水浒传读书笔记
2015/06/25 职场文书