jQuery 点击小图弹出层显示大图，附带鼠标指针悬浮效果

jQuery
前言

  最近公司项目中有个开发需求，用户在提交使用反馈意见(可上传图片)后，后台提供一个处理子系统，其实就是一个table显示反馈的内容以及图片而已，点击datagrid里面的缩略图可以查看大图。
  平时在浏览其他网站时一般鼠标悬浮在图片上时鼠标会变成放大镜的样式或者其他提示可放大的样式，感觉需求不复杂，说干就干。

开发说明

  jQuery、Ajax
先上波效果图：
  1、点击前：点击前
  2、点击后：点击后

实现
  • 1、 html代码
    1
    2
    3
    4
    5
    6
    7
    <table id="deviceRegist" res="${platform_context_path}/opinionService/deal/getAccountOpinionInfoList">
           <tr>
                <td name="pictureOne" style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;" ><img  src="${pictureOne}"  width="120px";height="80px";/></td>
                <td name="pictureTwo"  style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;"><img  src="${pictureTwo}" width="120px";height="80px"; /></td>
                <td name="pictureThree" style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;"><img src="${pictureThree}" width="120px";height="80px";/></td>
            </tr>
      </table>

这里只保留了img标签相关的html代码，其中img中src是ajax请求后台接口返回的base64字符串，格式为：data:image/png;base64,base64字符串）

  • 2、js代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
     <script type="text/javascript">
      $(function(){  
            $("td img").click(function(){  
                var _this = $(this);//将当前的img元素作为_this传入函数  
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
            }); 

            //列表缩略图悬浮时，鼠标指针替换成放大镜
            $("td img").hover(function(){  
                $(this).css({cursor:"url(/UI/images/zoom_in.cur),auto"});
            });
        }); 
    function imgShow(outerdiv, innerdiv, bigimg, _this){  
            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
            $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
            console.log(src);
            //鼠标在图片大图上悬浮时，鼠标指针替换成放大镜，提示点击关闭
            $(bigimg).css({cursor:"url(/UI/images/zoom_out.cur),auto"});
                /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
                var windowW = $(window).width();//获取当前窗口宽度  
                var windowH = $(window).height();//获取当前窗口高度  
                var img = new Image();
                img.src = src;
                var realWidth = img.width;//获取图片的真实宽度
                var realHeight = img.height;//获取图片的真实高度
                console.log("当前窗口宽度："+windowW);
                console.log("当前窗口高度："+windowW);
                console.log("图片真实宽度："+realWidth);
                console.log("图片真实高度："+realHeight);
                var imgWidth, imgHeight;  
                var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
                  
                if(realHeight>windowH*scale) {//判断图片高度  
                    imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
                    imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                    if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                        imgWidth = windowW*scale;//再对宽度进行缩放  
                    }  
                } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
                    imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                    imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
                } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                    imgWidth = realWidth;  
                    imgHeight = realHeight;  
                }  
                        $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
                         $(bigimg).css("height",imgHeight);//以最终的高度对图片缩放  
                  
                var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
                var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
                $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
                $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
      
              
            $(outerdiv).click(function(){//再次点击淡出消失弹出层  
                $(this).fadeOut("fast");  
            });  
        }  
      </script>

  • 3、制作静态光标文件

    • 3.1、下载放大镜图片
        图标文件网站:图标文件,可以搜索你想要的各种图标;图标网站
  • 3.2、将图片转换成cur(光标文件格式)
      在线CUR转换器，把下载的图标文件转换成cur文件保存到本地即可。curTransfer.png

放大镜指针效果代码：

1
2
3
4
//列表缩略图悬浮时，鼠标指针替换成放大镜
       $("td img").hover(function(){  
           $(this).css({cursor:"url(/UI/images/zoom_in.cur),auto"});
       });

其中/UI/images/zoom_in.cur就是这个静态光标文件所在路径

分享到