kl-scroll-text (文字滚动)

文章目录

使用
实现

使用

  <kl-scroll-text :height="24" :speed="50"><span class="span1">我是默认的long-text,davagavddadvadva</span></kl-scroll-text>

实现

<template><div class="kl-scroll-text" :style="{ width: width + 'px' }"><p:class="['kl-scroll-text-p']"ref="refP"><slot> kl-scroll-text </slot></p></div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
const props = defineProps({width: {// 显示宽度type: Number,default: 150,},height: {// 显示高度type: Number,default: 16,},speed: {// 移动速度 px/stype: Number,default: 30,},
});
const refP = ref();const heightRef = ref(props.height + "px");
const moveTime = ref<String>();onMounted(() => {let cWidth = refP.value.offsetWidth;moveTime.value = (cWidth - props.width) / (props.speed * 2) + "s";
});
</script>
<style lang="scss" scoped>
.kl-scroll-text {position: relative;width: 150px;overflow: hidden;
}.kl-scroll-text-p {line-height: v-bind(heightRef);height: v-bind(heightRef);display: inline-block;white-space: nowrap;
}
.kl-scroll-text-p:hover {animation: aleft infinite alternate linear;animation-duration: v-bind(moveTime);
}@keyframes aleft {0% {transform: translate(0, 0);}100% {transform: translate(calc(-100% + 150px), 0);}
}
</style>

kl-scroll-text (文字滚动)相关推荐

unity 文字滚动显示_Unity ScrollRect 实现垂直滚动文字
看了一些网上的其他文章,看的比较晕,自己摸索着做了一遍,把几个要点列出来,方便遇到相同问题的人. 1-列出控件,按照下图的方式组织所有的控件,注意不要从GameObject菜单创建ScrollView ...
动效之文字滚动5个代码
``1.文字竖直方向-向上滚动 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
各种文字滚动效果代码
几排文字向上滚动 <MARQUEE direction=up οnmοuseοut=start(); οnmοuseοver=stop(); scrollAmount=1 scrollDelay ...
html 文字滚动歌词字幕
<!doctype html> <html> <head><title>文字滚动歌词字幕</title><style type=&q ...
文字滚动的另一方法拆分文字来做到文字滚动
最近在看javascript详解这本书看到这个例子文字滚动,拆分文字来做到文字滚动. 代码如下 <!DOCTYPE html> <html> <head> < ...
html 控制文字的标签,html里面有一个控制文字滚动的标签marquee，比较有用。
简介这篇文章主要介绍了html里面有一个控制文字滚动的标签marquee,比较有用.以及相关的经验技巧,文章约3183字,浏览量161,点赞数4,值得参考! 本节笔者讲述HTML代码中比较特殊的标签, ...
html marquee css,HTML之marquee(文字滚动)详解_html/css_WEB-ITnose
语法: 以下是一个最简单的例子: 代码如下: Hello, World 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续 ...
HTML实现公告文字滚动效果
效果图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
android 文字滚动组件,Android textview 跑马灯文字滚动效果
设置如下TextView控件文件的XML: android:id="@+id/textview" android:layout_width="match_parent&q ...
html里面有一个控制文字滚动的标签marquee，比较有用。
本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字 ...

kl-scroll-text (文字滚动)

文章目录

使用

实现

kl-scroll-text (文字滚动)相关推荐

最新文章

热门文章