js 鼠标悬停图片放大

WorkBook121.cpt

  做了一个上传控件到本地服务器,把图片上传到服务器,在把图片链接放在报表里面,但是很多人上传的图片质量太好分辨率较高, 通过js 鼠标悬停图片放大的功能预览图片出现两个问题:1、图片质量的图片页面显示不全。2、预览图片和其他悬停点重叠后 图片闪烁。现在我在页面的右边预留了图片预览位置  麻烦大神帮忙补充一下语句  图片分辨率最好是在420*350 谢谢附上js语句 

$(".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里面放着图片  
$("#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")               
});  
//鼠标离开这个div移除  
$(".x-table td").mouseout(function(e){  
    $("#preview").remove();  
});


ctt 发布于 2019-3-28 09:21 (编辑于 2019-3-28 13:36)
1min目标场景问卷 立即参与
回答问题
悬赏:6 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
onlyxxLv5见习互助
发布于2019-3-28 13:32

给一个,模板cpt,我帮你改

最佳回答
0
PoseidonLv5高级互助
发布于2019-3-28 10:26

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

列表中实现悬停单元格显示图片,类似tooltip的功能-http://help.finereport.com/doc-view-2478.html


  • ctt ctt(提问者) 灯箱插件要钱 第二个我试了不行
    2019-03-28 11:25 
最佳回答
0
guxing7Lv3见习互助
发布于2019-3-30 14:47

你参考下:

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

var col=Number($(this).attr("col"));

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

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

//alert (col+row+img);

if(col==14)

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

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

//.css("width",10)

//.css("height",5)

.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","15%")

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

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

.css("position","absolute")

});

//鼠标离开这个div移除

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

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

});


  • ctt ctt(提问者) 谢谢 我已经解决了 非常感谢
    2019-04-01 09:23 
  • frzhangms frzhangms 回复 ctt(提问者) 怎么解决的,能否分享一下?非常感谢!
    2019-05-14 23:09 
  • 5关注人数
  • 1885浏览人数
  • 最后回答于:2019-3-30 14:47
    请选择关闭问题的原因
    确定 取消
    返回顶部