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

下面是我自己实现的，文字的位置可以随便更改，效果不会变，文字的内容可以通过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. AI学习---分类算法[K-近邻 + 朴素贝叶斯 + 决策树 + 随机森林 ]

    分类算法:对目标值进行分类的算法    1.sklearn转换器(特征工程)和预估器(机器学习)    2.KNN算法(根据邻居确定类别 + 欧氏距离 + k的确定),时间复杂度高,适合小数据    ...

  2. Microsoft .NET Framework 3.5 离线安装方法 （仅适用于Win8以上的系统）

    所需工具:本系统对应原版镜像或Win8以上操作系统原版ISO镜像 操作: 1.利用Windows资源管理器挂载 ISO 镜像,或其他虚拟光驱工具挂载镜像,记住挂载的盘符 2.打开Windows命令提示 ...

  3. LeetCode算法题-Symmetric Tree（Java实现）

    这是悦乐书的第163次更新,第165篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第22题(顺位题号是101).给定二叉树,检查它是否是自身的镜像(即,围绕其中心对称). ...

  4. java操作elasticsearch实现聚合查询

    1.max 最大值 //max 求最大值 @Test public void test30() throws UnknownHostException{ //1.指定es集群 cluster.name ...

  5. 转 jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...

  6. C#、Java中的一些小知识点总结(持续更新......)

    前言:在项目中,有时候一些小的知识,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小知识点,以备用,并持续更新...... 1.禁用DataGridV ...

  7. 【ZJOI2016】线段树

    [ZJOI2016]线段树 ZJOI的题神啊. 我们考虑计算每个位置\(p\),它在操作过后变成第\(x\)个数的操作序列数. 我们枚举\(x\).我们先得到了\(L_x,R_x\)表示最左边比\(x ...

  8. B树索引分裂

    一.索引分裂 1.  什么是分裂 在开始介绍之前,我们先来搞清楚什么是索引分裂吧.“索引分裂”就是索引块的分裂,当一次DML事务操作修改了索引块上的数据,但是旧有的索引块没有足够的空间来容纳新修改的数 ...

  9. multiply对应位置相乘 与 dot矩阵乘

    区别 # -*- coding: utf- -*- import numpy as np a = np.array([[,], [,]]) b= np.arange().reshape((,)) c ...

  10. P1824 进击的奶牛（二分）

    思路:把检验的函数说一下,就是检测的距离x时,是否存在c个隔断相离大于等于x,如果是则返回1,不是则返回0 #include<iostream> #include<cstdio> ...