android gridview 图片放大,【项目经验】——gridview中图片放大浏览

在开发软件过程中,一向秉承着为人民服务的宗旨。最近项目中需要在GridView中存放和显示图片,但是由于图片缩小程度比较大,相对比较模糊,不便于用户进行查看。于是,做了一项功能——鼠标位于图片上方时,图片放大显示。

1、GridView绑定图片的代码

οnmοuseοver="over('img')"; οnmοuseοut="out()" width="50" height="50" style="cursor: pointer;" />

2、实现的JS代码

//GridView中加入图片放大功能

//显示图片

function over(imgid) {

//图片的最大大小 4/3的大小 520 390

maxwidth = 520;

maxheight = 390;

//显示

document.getElementById('divImage').style.display = "";

//设置div的位置

var obj = document.getElementById('divImage');

//obj.style.left = 316;

//obj.style.bottom = 115; //202 115

//获取img 设置图片的大小

var img = document.getElementById('divImage').firstChild;

document.getElementById('imgbig').src = document.getElementById(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;

}

else {

//alert("没有超过");

}

obj.style.marginLeft = (img.width * -1) / 2;

}

//隐藏图片

function out() {

document.getElementById('divImage').style.display = "none";

}

3、实现效果

鼠标悬停在图片上方是,图片进行放大;鼠标移开是,图片消失。

16add30c0fd6b1df41f94f00f4217911.png

这样一来,用户就可以清晰的看到图片。即使图片上显示的是文字,也可以清晰的读出来了。这个技能,已经get√

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值