js代码跑马灯效果-----轮播图字效果!
文字元素:
<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代码跑马灯效果-----轮播图字效果!的更多相关文章
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 使用JS实现轮播图的效果
其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...
- jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- JS应用实例2:轮播图
在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...
随机推荐
- hive资料
Hive基本操作 Hive 解锁操作 之前使用Hive,出现过一种情况:在代码正在执行insert into或insert overwrite时,中途手动将程序停掉,会出现卡死情况,只能执行查询操作, ...
- Java Swing实现展示数据,以及过滤排序
public class RelationCostctrTable extends DefaultTableModel { public RelationCostctrTable(Vector< ...
- centos/RHEL 7.6 使用yum安装php7.3(方便wordpress的php7.3需求,并解决了libphp7.so缺失问题)
我最近想安装一个wordpress, 但是官网介绍需要php7.3以上版本,但是百度了一下,都是要编译安装. 为此,我想,centos..., php... 两大当红辣子鸡没有yum安装方式,简直不可 ...
- SQL视图命名规则:一般以V_xxx_xxxxxx
- 开发HR人事考试系统介绍
确定好需要开发的模块以及功能 一套人事考试系统主要模块: 1)组织管理:公司部门成员信息 2)人事管理:人事信息,离职管理,职务管理,岗位管理: 3)考勤管理:班次设置,停工放假,假日设置,刷卡记录, ...
- -1.记libgdx初次接触
学习一门技术最难的是开发环境变量配置和工具配置,以下为我初次接触libgdx时遇到的问题 几个难点记录下 gradle 直接用下到本地,然后放到d盘,链接到就行(gradle-wrapper.prop ...
- go语言的运算符
什么是运算符:运算符用于在程序运行时执行数学或逻辑运算 go语言的运算符如下: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 一,算数运算符 运算符 描述 实例 + 相加 A ...
- git撤销commit-hard
场景: 不小心commit了一个不应该commit的修改,但是还没有push,想撤销那个commit 命令: a)git log b)git reset --hard commit_id 具体步骤如下 ...
- 第二次OO总结
作业5——多线程电梯 好像失忆了,竟然对这三部电梯很陌生,我尽量回忆一下当时挣扎的场景orz 整体思路和第二次电梯差不多,但是将调度器类套在了电梯类里 优点可能是没有无效,足矣!!!缺点emmmm要是 ...
- JavaScript基础视频教程总结(131-140章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...