其实实现文字的跑马灯和实现图片轮播的原理是一样的。

下面是我自己实现的，文字的位置可以随便更改，效果不会变，文字的内容可以通过ajax获取，同时，可以直接用Jquery改写一下，很方便。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>文字跑马灯</title>

	<style>

		#race_notice_p{position:relative; margin-left:70%;width:300px; overflow:hidden; height:25px; background-color:gray; }

		#race_notice_s{position:absolute;left:0; top:0;color:red;}

		#race_notice_s p{ margin:0;}

	</style>

</head>

<body>

	<div id='race_notice_p' >

		<div id='race_notice_s'>

			<p>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

		</div>

	</div>

</body>

	<script>

		window.onload=function(){

			// 要显示的文字可以通过ajax获取之后，嵌入p标签

			function move(){

				var speed = -5;

				var race_notice_p = document.getElementById('race_notice_p');

				var race_notice_s = document.getElementById('race_notice_s');

				var p = race_notice_s.getElementsByTagName('p')[0];

				var length = p.offsetWidth;

				p.innerHTML +=p.innerHTML;

				function move_do(){

					if(race_notice_s.offsetLeft < - length){//重新开始

						race_notice_s.style.left=0;

					}

					race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px';

				}

				setInterval(move_do,100);

			}

			move();

		}

	</script>

</html>

　　

JavaScript实现文字跑马灯的更多相关文章

  1. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  2. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  3. js文字跑马灯

    实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript ...

  4. 用jQuery实现参数自定义的文字跑马灯效果

    一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...

  5. 微信小程序实现文字跑马灯

    wxml: <view>1 显示完后再显示</view> <view class="example"> <view class=" ...

  6. Android开发：文本控件详解——TextView（二）文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  7. Androidd Studio 之多行文字跑马灯特效

    •效果展示图 •参考资料 两种方法实现TextView跑马灯效果(字体横向滚动) •出现的问题 新建 Java 文件继承 TextView 时出现问题: •解决方法 不应该继承 $TextView$ ...

  8. Android:TextView文字跑马灯的效果实现

    解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...

  9. Android文字跑马灯控件（文本自动滚动控件）

    最近在开发一个应用,需要用到文本的跑马灯效果,图省事,在网上找,但老半天都找不到,后来自己写了一个,很简单,代码如下: import android.content.Context; import a ...

随机推荐

  1. 注入攻击(SQL注入)

    注入攻击是web安全领域中一种最为常见的攻击方式.注入攻击的本质,就是把用户输入的数据当做代码执行.这里有两个关键条件,第一是用户能够控制输入,第二个就是原本程序要执行的代码,将用户输入的数据进行了拼 ...

  2. elixir mix 简介

    概述 mix 是 elixir 工程的构建工具,利用 mix,可以快速方便的创建 elixir 工程,写单元测试,管理 elixir 包的依赖管理等等. 我觉得刚开始学习 elixir 的时候,先简单 ...

  3. 推荐几本FPGA书籍（更新中）

    1.<数字信号处理的FPGA实现>第三版 讲解比较详细的DSP理论,使用FPGA实现,不过使用VHDL语言:也颇具参考性. 2. <Xilinx Zynq-7000 嵌入式系统设计与 ...

  4. 【项目 · Wonderland】会议一 · 可达鸭

    [软件工程实践 · 团队项目] 第一次作业 Part 0 · 简 要 目 录 Part 1 · 队 伍 阵 容 Part 2 · 会 议 记 录 相 关 Part 3 · 会 议 讨 论 记 录 Pa ...

  5. 【项目 · Wonderland】需求规格说明书 · 终版

    [项目 · Wonderland]需求规格说明书 · 终版 Part 0 · 简 要 目 录 Part 1 · 流 程 / 分 工 Part 2 · 需 求 规 格 说 明 书 Part 1 · 流 ...

  6. C#多线程编程のSemaphore（信号量，负责协调各个线程）

    Semaphore负责协调线程,可以限制对某一资源访问的线程数量 这里对SemaphoreSlim类的用法做一个简单的例子: namespace WpfApplication6 { /// <s ...

  7. 因PHP漏洞，超过4.5万个中国网站被攻击

    因PHP漏洞,超过4.5万个中国网站被攻击 日前据外媒ZDNet了解,超过4.5万个中国网站受到了试图进入网络服务器的不法分子攻击. 此次黑客利用中国网络安全公司VulnSpy在ExploitDB上发 ...

  8. Python requests模块解析XML

    检查QQ是否在线(api感觉不准) import requests from xml.etree import ElementTree qq_str = input('please input the ...

  9. jvm运行时内存模式

    jvm内存模型 内存模型粗略划分为:堆和栈 详细划分为:堆,虚拟机栈,方法区,本地方法区,程序计数器 程序计数器: 为了线程切换后能恢复到正确的执行位置,每条线程都需要有一个独立的程序计数器,各条线程 ...

  10. 文本分类实战（一）—— word2vec预训练词向量

    1 大纲概述 文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...