小程序?qū)崿F(xiàn)跑馬燈效果
更新時(shí)間：2022年07月17日 11:49:25 作者：今天星期八
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
先看效果圖
實(shí)現(xiàn)步驟：
index.wxml文件
<!-- 跑馬燈效果 -->
<view class="example">
? <view class="marquee_box">
? ? <view class="marquee_text"?
? ? ?? ? ?style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
? ? ? <image src="{{adUrl}}" class='ad-image' />{{text}}
? ? </view>
? </view>
</view>
wxss文件
/* 跑馬燈效果 */
.example {
? display: block;
? width: 100%;
? height: 70rpx;
? background-color: #f2f2f2;
? line-height: 70rpx;
}
.marquee_box {
? width: 100%;
? position: relative;
}
.marquee_text {
? white-space: nowrap;
? position: absolute;
? top: 0;
? display: flex;
? flex-direction: row;
}
.ad-image {
? width: 40rpx;
? height: 40rpx;
? margin-right: 10rpx;
? margin-top: 15rpx;
}js文件
// pages/home/home.js
var app = getApp()
Page({
? data: {
? ? //跑馬燈
? ? text: '618淘甄貨,一個(gè)可以省錢的購(gòu)物平臺(tái)',
? ? marqueePace: 1,//滾動(dòng)速度
? ? marqueeDistance: 0,//初始滾動(dòng)距離
? ? size: 14,
? ? orientation: 'left',//滾動(dòng)方向
? ? intervals: 20, // 時(shí)間間隔
? ? adUrl: '../../images/detail/like.jpeg'
? },
? onShow: function () {
? ? // 頁(yè)面顯示
? ? var that = this;
? ? var length = that.data.text.length * that.data.size;//文字長(zhǎng)度
? ? var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度
? ? that.setData({
? ? ? length: length,
? ? ? windowWidth: windowWidth,
? ? });
? ? that.runMarquee();// 水平一行字滾動(dòng)完了再按照原來(lái)的方向滾動(dòng)
? },
? runMarquee: function () {
? ? var that = this;
? ? var interval = setInterval(function () {
? ? ? //文字一直移動(dòng)到末端
? ? ? if (-that.data.marqueeDistance < that.data.length) {
? ? ? ? that.setData({
? ? ? ? ? marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
? ? ? ? });
? ? ? } else {
? ? ? ? clearInterval(interval);
? ? ? ? that.setData({
? ? ? ? ? marqueeDistance: that.data.windowWidth
? ? ? ? });
? ? ? ? that.runMarquee();
? ? ? }
? ? }, that.data.intervals);
? }
})?以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本章主要介紹通過(guò)JavaScript讀取圖片的例子，本例子不包含服務(wù)器端后臺(tái)代碼，只包含前臺(tái)頁(yè)面代碼，所以直接用Html文件就可以，代碼如下，因?yàn)榘敿?xì)的注意，所以不再詳細(xì)說(shuō)明了，如果有看不明白的，可以給我留言，我給大家具體答復(fù)。2009-11-11
js對(duì)象實(shí)現(xiàn)數(shù)據(jù)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了js對(duì)象實(shí)現(xiàn)數(shù)據(jù)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript中undefined和null的區(qū)別
這篇文章主要介紹了 JavaScript中undefined和null的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-05-05
潛說(shuō)js對(duì)象和數(shù)組 對(duì)象是一個(gè)無(wú)序?qū)傩约? 每個(gè)屬性都有自己的名字和值2011-05-05
這篇文章主要介紹了js判斷undefined類型的實(shí)現(xiàn)方法,需要的朋友可以參考下2014-02-02
DIV+CSS+JS不間斷橫向滾動(dòng)實(shí)現(xiàn)代碼
不間斷橫向滾動(dòng)想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧，本文也使用DIV+CSS+JS實(shí)現(xiàn)一個(gè)，感興趣的你可以參考下哈，希望對(duì)你學(xué)習(xí)有所幫助2013-03-03
JS實(shí)現(xiàn)點(diǎn)擊拉拽輪播圖pc端移動(dòng)端適配
本文通過(guò)實(shí)例代碼給大家介紹了JS點(diǎn)擊拉拽輪播圖pc端移動(dòng)端適配 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
js獲取url頁(yè)面id，也就是最后的數(shù)字文件名
這篇文章主要介紹了js獲取url頁(yè)面id，也就是最后的數(shù)字文件名，有時(shí)候我們需要判斷當(dāng)前頁(yè)面的id，又不用重新生成頁(yè)面直接用js獲取最后的數(shù)字.htm即可2020-09-09
本篇我們用同樣的原理，把文字用CLIP屬性分的更細(xì)，分別著色，然后組合到一起，實(shí)現(xiàn)自左到右更精確的色彩漸變。問(wèn)題是文字細(xì)化分割需要用到很多很多個(gè)元素，所以這里我們要用程序來(lái)控制，自動(dòng)生成這些元素。2008-11-11