vue实现。让文字跑起来

最新推荐文章于 2024-04-03 12:22:13 发布
最新推荐文章于 2024-04-03 12:22:13 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 前端 Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/what_where/article/details/98455956
版权

vue实现。让文字跑起来

前言

在许多网页上我们都可以看到，标题滚动的效果。几天我就来讲一下这个效果使用vue怎么实现

效果：

当鼠标移入跑马灯文字时，跑马灯文字暂停滚动，反之鼠标移出继续滚动。

知识点：

  • substring(字符串截取)
  • setInterval定时器(解决字符串持续截取与头尾拼接)
  • clearInterval清除定时器(解决悬停暂停)
  • ES6箭头函数(解决this指向)

具体怎么实现：代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title
最低0.47元/天 解锁文章
一个被代码耽误的天才
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿打字特效的JS逐字出现的信息文字
10-29
JavaScript编写的文字特效，看似打字的效果，让文字逐个出现，你可以以这个为基础给你心爱的人写一段祝福的语，这的确挺合适。
vue实现文字一个字一个字的显示（开箱即用）
weixin_44056717的博客
03-26 557
【代码】vue实现文字一个字一个字的显示（开箱即用）
Vue前端文字效果：如何让一段文本像是手动一个一个字打出来的
薛钦亮的博客
01-04 3272
自己做的AI聊天机器人界面，文字显示模仿人类手动输入的感觉，我觉得比微信还好看。
vue 封装一个字符逐渐显示（一个一个显示出来）的组件
最新发布
weixin_72574747的博客
04-03 425
【代码】vue 封装一个字符逐渐显示（一个一个显示出来）的组件。
springboot+vue实现ChatGPT逐字输出打字效果 附源码
热门推荐
qq_44651842的博客
05-05 1万+
在调用OpenAI GPT接口时，如果不使用流式（stream:true）参数，接口会等待所有数据生成完成后一次返回。这个等待时间可能会很长，给用户带来不良体验。为了提升用户体验，我们需要使用流式调用方式。在这篇文章中，我们将介绍如何使用Spring Boot和Vue对接OpenAI GPT接口，并实现类似ChatGPT逐字输出的效果。
Vue&JS 文字逐个出现
jQuery,CSS,Asp.net及前端开放问题汇总
05-27 3778
Vue&JS 文字逐个出现 实现方式：开始文字设置为空 ，然后通过添加定时器截取content字符串来实现
vue&uni-app项目实现一段文字逐个显示
忘忧
04-29 4564
实现思路是 将要显示的字符串用substr() 方法进行分割，使用计时器逐个增加要分割的长度 主要代码： onLoad(options) { this.data=JSON.parse(options.data) this.wen = '' //声明一个变量，用来监听要分割的长度 var wenlen = 0 this.timer=setInterval (()=>{ //取到data.content的第wenlen位 this.wen = this.data.content.su
一个有趣的屏幕打字效果
02-16
有趣的屏幕打字效果,评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊
vue实现文字加密功能
10-16
主要为大家详细介绍了vue实现文字加密功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue图片与文字混输的实现方法
10-15
主要给大家介绍了关于Vue图片与文字混输的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue实现文字跑马灯效果
12-04
使用 vue 绑定style属性实现文字跑马灯效果。。。。。。。
Vue实现图片与文字混输效果
01-19
用多了 JQuery ，习惯了使用JQuery的API操作 DOM ，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，第一个想到的办法是用 textarea 实现，结果发现实现不了图片输入，然后想着找个富文本编辑...
vue实现公告栏文字上下滚动效果的示例代码
10-15
主要介绍了vue实现公告栏文字上下滚动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在 vue 中使用 vue-typed-js 实现打字机效果
小R.的博客
04-11 6846
  这篇博客和我的博客：原生 JS 实现打印机效果，一个字一个字出现，再一个字一个字消失，如此循环是实现的相同功能——打字机效果。即，一个字一个字出现，再一个字一个字消失，如此循环。如下图为大概样子：   我是在用原生js实现后看到typed.js这个js插件，进而找到了 vue-typed-js这个插件的，上面还有react的，位置如下图所示。   下面说一下 vue-typed-js这个插件的使用。 一、安装 npm install --save vue-typed-js 二、引入 import V
【vue】仿chatGPT逐个打字效果
Hemri2580的博客
05-03 1844
模仿chatGPT聊天逐个打字输出的效果。
html、css、js、react、vue 文字一行一行显示出来
鹤汀凫渚 的博客
02-04 7868
年报好帮手
实现一个简单的Vue插件
hp123456003的博客
04-22 587
概念 最近看了篇关于Vue插件的文章，为了避免忘记，打算写下来，以遍日后查阅。 我们引入全局变量的时候，可能需要一个一个的引入，而且在一个vue文件中引用的组件多了，会显得代码臃肿，所以才有了封装vue插件的需求。 插件组件模板 <template> <transition name="fade"> <div class="toast" v-s...
vue实现文字内容无缝向上滚动，鼠标移入停止滚动，鼠标移开继续滚动
qq_42780155的博客
07-02 3980
<div class="home-list"> <div v-for="item in events" :key="item.id" ref="contlist" :class="{'animate-up':animateUp}" @mouseenter="Stop()" @mouseleave="Up()"> <div class="home-content"> <div cla.
vue实现点击文字后变色
06-13
你可以通过为文字绑定一个点击事件，在点击事件中修改文字的样式来实现点击文字后变色的效果。具体实现如下： 1. 在模板中，为需要点击的文字添加一个点击事件： ```html <template> <div> <p @click="changeColor">这是一段需要点击的文字</p> </div> </template> ``` 2. 在Vue组件中，定义`changeColor`方法来修改文字的样式： ```javascript <script> export default { methods: { changeColor() { // 获取需要修改样式的元素 const text = document.querySelector('p') // 修改元素的样式 text.style.color = 'red' } } } </script> ``` 这样，当用户点击文字时，文字的颜色就会变成红色。当然，你可以根据需要修改文字的其他样式，比如背景色、字体大小等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值