文字元素:

<p id="yc-msg">你有本事来打我呀!</p>

  

js执行代码:

function ycMsg() {
// 获取 标签
var pObj = document.getElementById('yc-msg');
// 获取文字内容
var text = document.getElementById('yc-msg').innerText;
timeID = setInterval(() => {
var start = text.substring(0, 1);
var end = text.substring(1);
// 拼接字符串
text = end + start;
// 更换符号内容---
pObj.innerHTML = text; }, 400); } ycMsg();//调用函数

已经完成效果!

js代码跑马灯效果-----轮播图字效果!的更多相关文章

  1. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  2. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  3. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  4. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  5. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  6. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  7. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  8. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  9. JS应用实例2:轮播图

    在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. MR执行环境有两种

    本地测试环境(windows): 在windows的hadoop目录bin目录有一个winutils.exe 1.在windows下配置hadoop的环境变量 2.拷贝debug工具(winutils ...

  2. 桌面小部件Wight父类AppWidgetProvider的三个方法

    onUpdate()这个方法会在每次更新App Widget的时候调用,数据更新的逻辑都写在这个方法里边.而且要注意的是:在用户添加小部件的时候,会首先调用这个方法,应该在这个方法里进行初始化操作,比 ...

  3. java -相关技术

    地址:      http://www.codeyyy.com/java/11-35-52.html

  4. OvO

    OvO 知乎 网易云 图书馆 B站 小众软件 360极速浏览器下载 开源下载工具 下载地址1 下载地址2 下载地址3

  5. Python Day 11

    阅读目录 内容回顾 函数的参数 函数的嵌套调用 ##内容回顾 # 什么是函数:具体特定功能的代码块 - 特定功能代码块作为一个整体,并给该整体命名,就是函数 # 函数的优点: # 1.减少代码的冗余 ...

  6. 今天我给你们推荐一本书《Linux就该这么学》!!!

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  7. Mac os查看链接过的ssh key

    https://shipengliang.com/software-exp/mac-os-如何管理ssh-key.html

  8. Python开发——9.面向对象编程

    一.面向对象设计(Object oriented design) 面向对象设计是将一类具体事物的数据和动作整合到一起的过程,不会要求面向对象语言编程,但如果想要构造具备对象性质和特点的数据类型,需要更 ...

  9. Java File类与文件IO流总结

    1.File类 File类被定义为“文件和目录路径名的抽象表示形式”,这是因为File类既可以表示“文件”也可以表示“目录”,他们都通过对应的路径来描述.通过构造函数创建一个File类对象,则该对象就 ...

  10. node平台的安装与搭建

    1.node.js 官网:https://nodejs.org/   (.org:是非盈利机构,他们的软件是不收费的,但是服务收费) 安装完以后的检测指令:node -v    (在这里安装需要注意一 ...