JS实现悬停放大图片

编辑
  • 文档创建者:天狮座
  • 浏览次数:3650次
  • 编辑次数:13次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

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



    2. 思路

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


    3. 操作步骤

    3.1 模板设置

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


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


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


    3.2 添加事件

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

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

    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 id='preview'><img 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")
    });
    //鼠标离开这个div移除
    $(".x-table td").mouseout(function(e){
    $("#preview").remove();
    });


    4. 预览效果

    4.1 PC 端预览效果

    保存模板,选择填报预览,效果如上图所示。

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


    5. 已完成模板

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

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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]