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 相关文章推荐
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
原生JS实现音乐播放器
Jan 26 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时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python callable内置函数原理解析
2020/03/05 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python中的插入排序的简单用法
2021/01/19 Python
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
妇产医师自荐信
2014/01/29 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
大专毕业生求职信
2014/07/05 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
博士导师推荐信
2015/03/25 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
background-position百分比原理详解
2021/05/08 HTML / CSS