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、实现效果

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

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