JS实现悬停放大图片

1. 概述
1.1 问题描述

场景描述：在我们现实会做报表过程中，我们都会遇到类似淘宝购物一样，当鼠标放在图片上，可以使图片居中展示，现在我们可以通过 FR 实现这种方法，实现效果如下所示：

1.2 实现思路

通过 JS 实现鼠标悬停时图片居中展示，类似于淘宝的商品页面鼠标悬停放大效果。

2. 示例
2.1 模板设置

新建一张普通报表，在A列单元格中，添加对应的图片，默认将图片放在  %FR_HOME%\webapps\webroot\help\picture 目录下，如下图所示：

在 B 列单元格中，添加各图片的相对路径，如下图所示：

为了美观我们将B列隐藏。

2.2 添加事件

选择模板>模板 Web 属性>填报页面设置，添加“加载结束”事件，如下图所示：

注：只有填报预览才能实现该效果。

JS 代码如下：

1. $(".x-table td").mouseover(function(e){
   
2. var col=Number($(this).attr("col"))+1;  //获取鼠标当前所在单元格的col
   
3. var row=$(this).attr("row");  //获取鼠标当前所在单元格的row
   
4. var img=contentPane.curLGP.getCellValue(col,row);  //获取到隐藏的图片地址
   
5. $("body").append("<div id='preview'><img src='"+ img +"'  /></div>");//弹出一个div里面放着图片
   
6. $("#preview")//修改这个div的样式，让他居中
   
7. .css("-ms-transform","translate(-50%,-50%)")
   
8. .css("-moz-transform","translate(-50%,-50%)")
   
9. .css("-o-transform","translate(-50%,-50%)")
   
10. .css("transform","translate(-50%,-50%)")
    
11. .css("left","50%")
    
12. .css("top","50%")
    
13. .css("z-index","9999999")
    
14. .css("position","absolute")
    
15. });
    
16. //鼠标离开这个div移除
    
17. $(".x-table td").mouseout(function(e){
    
18. $("#preview").remove();
    
19. });

复制代码

2.3 预览效果

保存模板，选择填报预览，效果如下图所示：

注：经过测试，手机端和 H5 不支持该效果。

3. 模板下载

模板效果在线查看请点击：JS 悬停放大图片.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\02-JS悬停放大图片.cpt

点击下载模板：02-JS悬停放大图片.cpt

本地图片才能实现吧？

&#128002;&#128002;&#128002;&#128002;

非常好 ，吸取一下经验

学习一下

奇了怪了，怎么我按照你这个demo做的，完全没效果啊

图片的相对路径路径是什么？在哪里获取呢？

如果C列D列有数据时鼠标悬停到C,D列上会显示一个小图标，可以固定为A列去获取，别的列不获取嘛

鼠标放在图片上，为啥会一直闪屏呢