首页 > 其他分享 >vue js文字跑马灯基础版本

vue js文字跑马灯基础版本

时间:2022-11-23 15:04:20浏览次数:40  
标签:vue const crollingst js paymentPromptText 跑马灯 left size

1.html原生方法

<marquee>123123</marquee>

2.定时器方法

let paymentPromptText = document.getElementById('paymentPromptText'); // 文本的总宽度
      const textWidth=paymentPromptText.scrollWidth   
let size=0
      paymentPromptText.style.left='100px'
      const crollingst=function(){
        if(size==0-textWidth){
          size=1090
        }else{
          size--
        }
        paymentPromptText.style.left=size+'px'
        setTimeout(() => {
          crollingst()
      }, 10);
      }
        crollingst()
<div id="paymentPromptText">123123123_—————————————————————————————————————</div>
#paymentPromptText{
  /* width: 100%; */
  position: relative;
  left: 0px;
}

 

标签:vue,const,crollingst,js,paymentPromptText,跑马灯,left,size
From: https://www.cnblogs.com/naitang/p/16918261.html

相关文章

  • 常用js库和框架(vue&element ui与webpy)
        编写前端代码的同学都知道,目前最火的前端代码是vue&elementui,而后端个人又比较喜欢用webpy,那么这两者是怎么配合的。现在都说要实现前后端分离,两者的json数据......
  • 常用js库和框架(three.js)
        three.js是web上面经常使用到的一个3d库。它在web领域里面的流行程度,有点类似于linux里面的opengl,windows里面的d3d。初学3d库,大家不要有什么畏难情绪,只要一步......
  • 常用js库和框架(ueditor)
        在前端开发的过程当中,文本的编辑一般都是少不了的。但是文本的编辑比较复杂,常常涉及到字体、图片、布局等很多内容。因此,有一个得心应手的editor编辑器是非常重......
  • 常用js库和框架(echarts)
    前端库,不管是饼图、柱状图,都可以很轻松的画出来。所需要的准备,就是把数据准备好就可以了。下面一个简单的例子来说明下,1、准备demo文件<head><metacharset="utf-8"/>......
  • 将 vue.js 获取的 html 文本转化为纯文本
    我存入数据表中的数据是使用html格式,获取数据是使用vue获取。遇到了一个问题,就是界面上显示的数据是html格式的,但是我需要它显示纯文本。怎么做呢?首先在js中......
  • Vue和Electron分离开发,一起打包
    分别安装Vue和Electron参照地址:https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-applicationhttps://www.electronforge.io/npminitvue@latestnpmin......
  • vite+vue3批量导入静态资源图片;动态绑定大量图片
    vite版本:vite3;vue版本:vue3打包上线后发现,动态绑定的图片皆失效。单图可用import导入解决,但是若有大量图片,一一导入则耗时耗力。vue2+webpack可用require解决批量导......
  • C#使用Tamir.SharpSsh.jsch异常Algorithm negotiation fail
    环境服务器:centos6.5客户端:Windows前言项目中有一个exe,安装在客户端,其中有一个功能是将本地产生的文件上传至服务器,这个功能是以服务的方式安装在客户端上。之前一切好......
  • jsonpath 类的用法
    1importjson23#字典==>json4test_dict={"key1":"val1","key2":None,"key3":True,"key4":False}5new_json=json.dumps(test_dict)6print(type(new......
  • vue 使用i18n 实现中英文切换 表单校验提示不更新问题
    在用i18n实现中英文切换的时候,出现了在表单中校验不更新的问题,尝试多种方式无果,下面这个方法值得一试。可轻松解决此问题。data(){ruleInline:{userName:......