看板上鼠标悬浮图片变大问题

因为我是要做看板的点击跳转按钮,需要一个鼠标放在按钮上时是放大的,离开变成正常的怎么做

FineReport 是曾经 发布于 2024-7-25 16:43 (编辑于 2024-7-25 16:44)
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
YikWLv2见习互助
发布于2024-7-25 16:48

要实现帆软报表中鼠标放在按钮上放大,离开后恢复正常的效果,可以通过在模板的 Web 属性中添加 JavaScript 代码来实现。以下是一种可能的实现方式:

  1. 进入报表的模板 Web 属性。

  2. 在填报页面设置中,取消勾选“填报当前编辑行背景设置”(如果有的话)。

  3. 在事件设置中添加“加载结束”事件。

  4. 在加载结束事件的 JavaScript 代码区域中,添加以下代码:

javascript写入下方代码:

$("按钮的选择器").hover(   function() {     $(this).css("transform", "scale(1.2)"); // 鼠标悬停时放大,1.2 可根据需要调整放大倍数   },   function() {     $(this).css("transform", "scale(1)"); // 鼠标离开后恢复正常大小   });

在上述代码中,"按钮的选择器" 需要替换为实际按钮的选择器。例如,如果按钮有一个特定的 ID 为"myButton",则选择器可以是#myButton;如果按钮有特定的类名"buttonClass",则选择器可以是.buttonClass。

这样,当鼠标悬停在按钮上时,按钮会放大;鼠标离开按钮后,按钮会恢复到正常大小。

请注意,上述代码是基于 jQuery 实现的鼠标悬停事件处理。确保在使用该代码之前,帆软报表的页面中已经正确引入了 jQuery 库。如果没有引入,可能需要在报表的相关设置中添加 jQuery 库的引用,或者将 jQuery 代码直接添加到报表的模板中。

另外,具体的代码可能需要根据帆软报表的版本和实际情况进行微调。上述示例中的$("按钮的选择器")部分需要根据按钮在页面中的实际情况进行选择器的设置,以确保准确选中要应用效果的按钮。同时,css("transform", "scale(...)")中的放大倍数也可以根据需求进行修改。

最佳回答
0
华莉星宸Lv7高级互助
发布于2024-7-25 16:54

给按钮添加要给初始化事件

setTimeout(function() {

$("div[widgetname='BUTTON0']").mouseover(function() {

_g().getWidgetByName('BUTTON0').css('width', '150px');

_g().getWidgetByName('BUTTON0').css('height', '150px');

});

$("div[widgetname='BUTTON0']").mouseout(function() {

_g().getWidgetByName('BUTTON0').css('width', '80px');

_g().getWidgetByName('BUTTON0').css('height', '80px');

});

}, 100)

image.png

效果

GIF.gif

  • 3关注人数
  • 155浏览人数
  • 最后回答于:2024-7-25 16:54
    请选择关闭问题的原因
    确定 取消
    返回顶部