报表怎样实现滚动的公告效果?

Dashboard 以丰富的动态、可交互的可视化界面为用户提供了更好的数据使用体验,让决策者能够更高效的了解企业的重要信息和细节层次。在 DBD 的各种动态效果中,滚屏是较为常见的一种,例如下图中的数据列表因为布局是固定的,因此就需要滚动显示数据。

通常报表中见到的滚屏是因为“页面大、窗口小”,也就是打开的窗口区域容纳不了整个页面的内容,需要靠键盘的方向键或鼠标滚轮来移动查看。而在 DBD 中,为了更好的交互效果,需要滚动自动持续进行,只有当鼠标移到该区域时才暂停。这种方式虽说已经比较常见了,但一般来说报表厂商却并没有直接提供,而是需要通过 jquery,JS 来实现。现在我就给大家介绍一下如何实现这种文字滚屏效果。

我们将在润乾报表设计器自带的“设备故障分析.rpx”基础上实现文字滚屏实例。

1. 数据集整理

对于从数据库读取的数据,可以通过集算器,将数据整理成下面截图中的效果。为了方便做效果,这里我直接将 ds2 这个内建数据中的所有字段的值整理到“设备”这个字段中,并且在里面加上了些空格,以便页面上缩进的效果好看些。

2. 合并单元格

将 G15 列删除,B15—F15 选中,合并。

3. 单元格数据类型设置为 html

4. 设置单元格表达式,如上图所示。下面是具体的表达式。

=“”+replace([email protected](ds2.select( 设备)),“,”,“
”)+“”

其中:

onmouseover=this.stop() 表示当鼠标以上区域的时候滚动停止;

onmouseout=this.start() 表示当鼠标移开的时候继续滚动。

5. 调整样式

原 B15-F15 设置了各行异色,因为我们的文字滚动项作为统一的一串内容,所以按照以上设置,效果感觉会有些突兀,如下图所示。

去掉 B15-F15 背景色的设置,这样滚动区域就整体浑然一体。

经过以上步骤我们的数据列表就在 DBD 面板中滚动起来了,并且当鼠标指向数据的时候就会停止滚动,鼠标移开的时候就继续滚动了,这样的交互效果无疑会为你的大屏展现锦上添花。

上面这个小例子简单实现了文字滚动显示的效果。下面我具体讲解下看似神奇的标签的各个属性值,相信看过后一定会帮助您实现更好的文字滚动效果:

另外,您也可以将 <marquee> 和 </marquee> 之间的内容替换成图像或其它对象。

原文地址:https://www.cnblogs.com/xiaohuihui-11/p/12015603.html

时间: 2024-11-07 09:16:47

报表怎样实现滚动的公告效果?的相关文章

使用UILabel实现滚动字幕移动效果

这个链接中的代码也实现了这种效果 https://github.com/cbpowell/MarqueeLabel 最终效果如下: 原理如下: 1. 获取文本 2. 计算文本宽度 3. 将这个Label放入ScrollView中 4. 将ScrollView的contentSize的宽度设置与文本宽度一致 5. 做动画 *6. 边缘的渐隐效果请使用带透明像素的PNG图片 // // RootViewController.m // // Copyright (c) 2014年 Y.X. All r

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

逐渐显示刷新的网站公告效果

<html><head><title>逐渐显示刷新的网站公告效果</title><FCK:meta http-equiv="content-Type" content="text/html;charset=gb2312" /><body><!--把下面代码加到<body>与</body>之间-->网站公告:<a id="HotNews"

JQuery实现数字滚动增加的效果

因为项目要求,要做一个数字滚动增加的效果.在网上没有找到好的插件,所以就自己做了一个,供大家参考. 先来看一下效果,看看你们需不需要: 这个动画效果,只支持8位数字(包括小数点后两位),需要其他的,可以自己看看修改一下 先上html代码: <div class="flip"> <div class="price-icon">¥</div> <div class="price-div"> <di

视差滚动(Parallax Scrolling)效果的原理和实现(转)

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果:http://www.ok-studios.de/home/ 一.什么是视差滚动? 视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快.当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中

滚动的半圆效果

在线演示 本地下载 利用css3和js实现滚动的半圆效果,希望大家喜欢~

背景弹性滚动的导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>背景弹性滚动的导航效果</title>

利用10行js代码实现上下滚动公告效果

解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); <div class="notice"> <ul> <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li> <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li> <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li> <li

Unity3D 文字滚动跑马灯效果

需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.文字显示属于UI范畴,直接使用unity3d中的GUI功能是比较合适的. 实现 一.新闻公告类 新闻公告类的文字滚动一般都是由左向右,或者由下至上滚动的,并且多是单行单列的模式. public class Lamp : MonoBehaviour { public float scrollviewWi