最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js写的方法实现上传图片之后查看大图_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:20:32
文档

js写的方法实现上传图片之后查看大图_javascript技巧

js写的方法实现上传图片之后查看大图_javascript技巧:将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。 显示大图和隐藏大图的js代码: 代码如下: //显示图片 functi
推荐度:
导读js写的方法实现上传图片之后查看大图_javascript技巧:将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。 显示大图和隐藏大图的js代码: 代码如下: //显示图片 functi
 将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。

显示大图和隐藏大图的js代码:
代码如下:

//显示图片
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";
}


显示小图的image和显示大图的image:
代码如下:

<%--显示大图标的区域--%>



文档

js写的方法实现上传图片之后查看大图_javascript技巧

js写的方法实现上传图片之后查看大图_javascript技巧:将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。 显示大图和隐藏大图的js代码: 代码如下: //显示图片 functi
推荐度:
标签: 图片 方法 技巧
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top