分页预览时,鼠标悬停实现图片放大

image.png

$(".x-table td").mouseover(function(e){

var col=Number($(this).attr("col"))+1;  //获取鼠标当前所在单元格的col 

var row=$(this).attr("row");  //获取鼠标当前所在单元格的row 

var img=contentPane.curLGP.getCellValue(col,row);  //获取到隐藏的图片地址

$("body").append("<div id='preview'><img style=\"width:100%;height:100%\" src='"+ img +"'  /></div>"); //弹出一个div里面放着图片

$("#preview")//修改这个div的样式,让他居中

.css("-ms-transform","translate(-50%,-50%)")

.css("-moz-transform","translate(-50%,-50%)")

.css("-o-transform","translate(-50%,-50%)")

.css("transform","translate(-50%,-50%)")

.css("left","50%")

.css("top","50%")

.css("z-index","9999999")

.css("position","absolute")

.css("width","410px")

.css("height","410px")

    });

    //鼠标离开这个div移除

$(".x-table td").mouseout(function(e){

$("#preview").remove();

    });

找到上述代码好像实现不了,图片地址为数据库中的http的地址

FineReport pkZKVhmC 发布于 2024-5-24 10:00
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
用户k6280494Lv6资深互助
发布于2024-5-24 10:01
  • pkZKVhmC pkZKVhmC(提问者) 这个悬浮图片是固定的,那我怎么去显示这个单元格本身的图片呢,图片是数据库中的http地址的
    2024-05-24 10:10 
最佳回答
0
snrtuemcLv8专家互助
发布于2024-5-24 10:01

那就试试插件

图片灯箱插件 https://help.fanruan.com/finereport/doc-view-2661.html

最佳回答
0
胡歌Lv7中级互助
发布于2024-5-24 10:26

你看下你这段

var col=Number($(this).attr("col"))+1;  //获取鼠标当前所在单元格的col 

var row=$(this).attr("row");  //获取鼠标当前所在单元格的row 

能获取到行号列号吗?

  • pkZKVhmC pkZKVhmC(提问者) 那这个是只有填报预览才能动态获取行号列号
    2024-05-24 12:15 
  • 4关注人数
  • 327浏览人数
  • 最后回答于:2024-5-24 10:26
    请选择关闭问题的原因
    确定 取消
    返回顶部