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 相关文章推荐
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 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
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP 类与构造函数解析
2017/02/06 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
跟老齐学Python之模块的加载
2014/10/24 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python中logging包的使用总结
2018/02/28 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
农民工工资支付承诺函
2014/03/31 职场文书
债务授权委托书范本
2014/10/17 职场文书
简易离婚协议书范本
2014/10/24 职场文书
导游词之湖北武当山
2019/09/23 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS