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

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


      1、GridView绑定图片的代码


<asp:TemplateField HeaderText="显示图片" ItemStyle-CssClass="tcTdCenter">
	<ItemTemplate>
  	<img alt="" id='img<%# Eval("Id") %>' src="../../Common/ShowFile.ashx?smatlpicpath=filePath" 
		onmouseover="over('img<%# Eval("Id") %>')"; onmouseout="out()" width="50" height="50" style="cursor: pointer;" />
  </ItemTemplate>
</asp:TemplateField>


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

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


      【项目经验】——gridview中图片放大浏览_第1张图片


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

你可能感兴趣的:(GridView,图片显示)