文字滚动显示

<div id="div1" style="overflow: hidden; height: 200px;">

    <div id="div2" style="height: 200px;">

        <asp:literal id="lblNewsLetter" runat="server"></asp:literal>

    </div>

    <div id="div3" style="height: 200px;">

    </div>

</div>

<script type="text/javascript">

    var speed = 40

    var div1 = document.getElementById("div1");

    var div3 = document.getElementById("div3");

    var div2 = document.getElementById("div2");

    div3.innerHTML = div2.innerHTML

    function Marquee() {

        if (div1.scrollTop - div2.offsetHeight > 0) {

            div1.scrollTop = 1;

        }

        else {

            div1.scrollTop++

        }

    }

    var MyMar = setInterval(Marquee, speed)

    div1.onmouseover = function () { clearInterval(MyMar) }

    div1.onmouseout = function () { MyMar = setInterval(Marquee, speed) }

</script>

可以使用 `uni-app` 自带的 `scroll-view` 组件来实现文字滚动显示。具体步骤如下: 1. 在 `template` 中添加 `scroll-view` 组件,并设置相关属性: ```html <scroll-view scroll-x="true" scroll-y="false" class="scroll-view"> <view class="text">{{text}}</view> <!-- 文字内容 --> </scroll-view> ``` 其中,`scroll-x="true"` 表示可以水平滚动,`scroll-y="false"` 表示不能竖直滚动,`class="scroll-view"` 可以自定义样式。 2. 在 `script` 中设置文字内容和滚动速度: ```javascript data() { return { text: '这是一段需要滚动显示文字,可以根据实际情况修改', speed: 50 // 滚动速度,数值越小速度越快 }; }, mounted() { // 获取文字内容的宽度 let query = uni.createSelectorQuery().in(this); query.select('.text').boundingClientRect(res => { let width = res.width; let screenWidth = uni.getSystemInfoSync().windowWidth; let duration = width / this.speed * 1000; // 滚动持续时间 let distance = screenWidth + width; // 滚动距离 this.startScroll(duration, distance); }).exec(); }, methods: { startScroll(duration, distance) { // 开始滚动 uni.createAnimation({ duration: duration, timingFunction: 'linear' }).translateX(-distance).step(); this.animation = uni.createAnimation({ duration: 0, timingFunction: 'linear' }).translateX(distance).step(); this.setData({ animationData: this.animation.export() }); setTimeout(() => { this.setData({ animationData: this.animation.export() }); }, 100); setTimeout(() => { this.startScroll(duration, distance); }, duration); } } ``` 这里通过 `uni.createSelectorQuery()` 获取文字内容的宽度,根据滚动速度计算出滚动持续时间和滚动距离,然后使用 `uni.createAnimation()` 创建动画实现文字滚动,通过 `setTimeout()` 实现循环滚动的效果。 3. 在 `style` 中设置样式: ```css .scroll-view { height: 30rpx; /* 滚动区域高度 */ overflow: hidden; } .text { white-space: nowrap; /* 防止文字换行 */ display: inline-block; } ``` 这里设置滚动区域的高度和文字样式。 以上就是 `uni-app` 实现文字滚动显示的简单步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值