Qt:QML:文字自动滚动

小灰灰 2022-07-12 17:52 235阅读 0赞

### 文字自动滚动效果 ###

![这里写图片描述][SouthEast]

### 代码 ###

import QtQuick 2.5
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 400
        height: 300
        title: qsTr("Text Auto Scrool")
        Rectangle {
            width: 131; height: 25
            color: "red"
            clip:true
            anchors.centerIn: parent
    
            Text
            {
                id:idtext
                //width: parent.width
                height:parent.height
                text:"123456789abcdefghijklmnopqrstuvwxyz"
                color:"yellow"
                verticalAlignment: Text.AlignVCenter
    
                SequentialAnimation on x {
                    loops: Animation.Infinite
    
                    PropertyAnimation {
                        from:0
                        to: -idtext.width
                        duration: 5000
                    }
                }
    
            }
        }
    
    
    }

> 完整代码: [https://github.com/CodeBees/qtExample/tree/master/textautoscrool][https_github.com_CodeBees_qtExample_tree_master_textautoscrool]

[SouthEast]: /images/20220709/1eba252ecc02410aa3c587980432dcfd.png
[https_github.com_CodeBees_qtExample_tree_master_textautoscrool]: https://github.com/CodeBees/qtExample/tree/master/textautoscrool

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关文字滚动效果

果图： ![1136726-20190727135750286-484066540.png][] 代码如下： <style style="text/...

喜欢ヅ旅行/ 2024年04月20日 10:50/ 0 赞/ 80 阅读

相关 js不间断文字滚动

不间断文字滚动 Code: 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

傷城~/ 2024年02月17日 20:13/ 0 赞/ 19 阅读

相关表格自动滚动

demo，这里需要注意需要给表头thead加上背景颜色，如果不加，表头处的滚动则会看见 <html> <head>

墨蓝/ 2023年08月17日 16:56/ 0 赞/ 97 阅读

相关实现文字滚动效果

需求：滚动文字：每隔200ms 更新一次实现步骤： 1 、将第一个p标签的文字存储下来txt

浅浅的花香味﹌/ 2022年09月11日 13:14/ 0 赞/ 268 阅读

相关文字滚动JS代码

文字滚动特效，还是比较简单的只要弄明白远离，主要是定时器的使用，今天在慕课上看到一个比较好的，滚动好写只要实现scrollTop++就可以，难点在于怎么样实现无限滚动，要理解两

雨点打透心脏的1/2处/ 2022年08月03日 05:15/ 0 赞/ 185 阅读

相关 Qt:QML:文字自动滚动

文字自动滚动效果 ![这里写图片描述][SouthEast] 代码 import QtQuick 2.5 import QtQuick.Windo

小灰灰/ 2022年07月12日 17:52/ 0 赞/ 236 阅读

相关 JavaScript 自定义自动滚动文字，两种方式

TextAutoScroll.js function TextAutoScroll() { var _this = this; this.Scro

爱被打了一巴掌/ 2022年05月28日 01:52/ 0 赞/ 434 阅读

相关文字滚动

页面代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

秒速五厘米/ 2022年04月03日 13:00/ 0 赞/ 270 阅读

相关 section标签实现文字滚动

h5新增样式 section标签使用demo //h5新增属性 h5新增滚动的标签 <marquee> <div style="

傷城~/ 2022年01月07日 15:07/ 0 赞/ 340 阅读

相关文字滚动标签

Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。来介绍下标签的属性滚动方向 direction <!--滚动方向 directi

叁歲伎倆/ 2021年11月29日 16:08/ 0 赞/ 376 阅读