javaScript easyUI实现 图片预览功能（鼠标移动到图片上 显示大图在旁边）

  最近博主在写一个上传图片的界面，然后想到了这样一个需求，就是，当图片在界面上显示时，有些图片由于博主加了限制显示图片的尺寸，看起来很小，无法看到细节。

  因此博主想实现这样一个功能，就是当鼠标移动到图片上时，旁边就会出现这个图片的稍大的图，这样就可以让图片的细节被看到。说干就干。

  存在的问题：

（1）需要一个容器来放预览图

（2）这个预览图的位置是通过图片的位置而决定的（设置成一直保持在图片的右方）

（3）图片的大小不一，导致预览图的大小也需不一，并不是单纯的将其长宽各乘以一个倍数，还要设置最大限制。

（4）由于博主的图片是放在弹框里的，而弹框又是可以拖动的，因此预览图的位置也可以随着弹框位置的改变而改变。

（5）有时候，预览图还可能超出了屏幕范围，因此需要做一个判断，若其原图离屏幕边界越近，则预览图与屏幕边界的距离将要减小。

  按照这个思路，博主实现的这个预览功能的逻辑是这样的：

（1）首先要定义一个<div></div>的标签，并在这个<div>里包一个空的<img>，这样就可以让预览图放到里面。

（2）其次，这个<div>只有在鼠标移动到图片上时才显示，鼠标移动开时，这个<div>将隐藏。

（3）这个<div>的位置，那是肯定要随着指的图片的位置不同而改变，即这个<div>的位置是变动的，博主打算将其设置成在图片的右方显示。

（4）弹框可拖动问题：博主将每次判断弹框在屏幕的位置，通过其位置，以及图片在弹框中的位置，最终来设定预览图所在的位置。

（5）图片大小不一问题：博主通过实验，发现，图片根据尺寸的比例，分为两种图，一种是高大于宽的图，另一种是宽大于高的图，当遇到高大于宽的图时，可以设置<div>的高度不变，宽度设置属相为auto；当遇到宽大于高的图时，可以设置<div>的宽度不变，高度属性设置为auto。

好了，按照这个思路，博主开始着手写代码。

首先，定义一个放预览图的<div>,如下：

<div id="imgDialog" style="display: none;vertical-align: center;" align="center">
    <img id="biggerImg" class="pre-img" style="vertical-align: middle;display: block;">
</div>

由于博主因为业务需求，是把图片放到了easyUI设置的弹框里的，我还是在这里定一个弹框吧，如果有的读者的图片不是在弹框里的，可以根据我的代码稍加修改，弹框大致如下，里面有个img：

<div id="dataDialog" style="display: none;width: 1200px;height:700px" align="center" dataoptions=" title:'添加配置',modal:true,closed:true,maximizable:true,iconCls:'icon-add'">
    <form>
        <table>
            <tr>
                <td>
                   <img src="xxx.jpg">
                </td>
            </tr>
        </table>
    </form>
</div>

好了，东西都定义好了，接下来开搞，代码如下：

//当鼠标移动到图片上时
$("img").mouseover(function (e) {
        //活动当前图片的src
        let nowSrc = $(this).attr("src");
        //定义预览图的初始x轴和y轴
        let x = 0;
        let y = 0;
        //获得图片高度和宽度
        let width = $(this).width();
        let height = $(this).height();

        //这里这个topProportion是为了比较图片在弹框里面的高度，越小则越上面，越大越下面，防止图片超过屏幕被覆盖
        let topProportion = $(this).position().top / 750;
        //这里的relativeLeft是为了获得弹框相对于屏幕左边的距离
        let relativeLeft = $('#dataDialog').offset().left;

        //开始设置预览图的位置
        //加上外面那个大框框位于整个页面的绝对位置(因为预览图时在原图的右边展示，所以只需要获得原图相对于左边屏幕的位置以及图片的宽度就可以获得预览图的x大小)
        x = $(this).position().left + width + relativeLeft;
        //这里减掉是为了让图片的位置高一点，不然最底下的图片被挡住了，若越下，则topPropotion则越大，所以图片就上移幅度越大，防止被遮盖(这里的公式是博主经过多次尝试后，觉得比较通用的公式，读者可以自己尝试怎么设置比较好)
        y = $(this).position().top - height * (0.8 + topProportion);

        //这里开始设置预览图的大小
        //这里的propotion是为了获得图片高和宽的比例，同时，判断时高大于宽还是宽大于高
        let proportion = 0;
        if (height > width) {
            //若高大于宽，则高度固定
            proportion = width / height;
            $("#imgDialog").css({width: 450*proportion, height: 450});
            $("#biggerImg").css({height:450,width:450*proportion});
        } else if (height <= width){
            //若高度小于宽，则宽度固定
            proportion = height / width;
            $("#imgDialog").css({width: 500, height: 500*proportion});
            $("#biggerImg").css({width:500, height:500*proportion});
        }

        //设置好后，将图片src赋值给预览图
        $('#biggerImg').attr("src", nowSrc);

        //将预览框的左上角位置设置成x，y，并显示。
        $('#imgDialog').window("open").window('resize', {top: y, left: x});
    })

    //当鼠标移出图片时，将div关闭，这里关闭的方式是easyUI的一个方式，若读者不是用的easyUI，可以通过设置其display为none的方式将其隐藏。
    $("img").mouseout(function () {
        $('#imgDialog').dialog("close");
    })

结果展示：当鼠标移动到图片上时，出现预览图在右方

    好了，主流程就是上面了，可能由于一些其他问题，导致这个方法在读者的页面中无法正常实现，因此读者可以理解上面的代码后自行修改，其实也很容易，博主基本上每一行都加了注释，希望您能看懂，如果有哪里不行的话，就评论你的问题吧。我尽力帮你解决。