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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>文字跑马灯</title>
  6. 	<style>
  7. 		#race_notice_p{position:relative; margin-left:70%;width:300px; overflow:hidden; height:25px; background-color:gray; }
  8. 		#race_notice_s{position:absolute;left:0; top:0;color:red;}
  9. 		#race_notice_s p{ margin:0;}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<div id='race_notice_p' >
  14. 		<div id='race_notice_s'>
  15. 			<p>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
  16. 		</div>
  17. 	</div>
  18. </body>
  19. 	<script>
  20. 		window.onload=function(){
  21. 			// 要显示的文字可以通过ajax获取之后，嵌入p标签
  22. 			function move(){
  23. 				var speed = -5;
  24. 				var race_notice_p = document.getElementById('race_notice_p');
  25. 				var race_notice_s = document.getElementById('race_notice_s');
  26. 				var p = race_notice_s.getElementsByTagName('p')[0];
  27. 				var length = p.offsetWidth;
  28. 				p.innerHTML +=p.innerHTML;
  29. 				function move_do(){
  30. 					if(race_notice_s.offsetLeft < - length){//重新开始
  31. 						race_notice_s.style.left=0;
  32. 					}
  33. 					race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px';
  34. 				}
  35. 				setInterval(move_do,100);
  36. 			}
  37. 			move();
  38. 		}
  39. 	</script>
  40. </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. php配置文件php.ini的详细解析

    ;;;;;;;;;;;;;;;;;;;; ; Language Options ; ;;;;;;;;;;;;;;;;;;;; ; Enable the PHP scripting language e ...

  2. DVWA v1.9 新手指南

    DVWA简介 DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法 ...

  3. 聚类——FCM的matlab程序

    聚类——FCM的matlab程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在聚类——FCM文章中已介绍了FCM算法的理论知识,现在用matlab ...

  4. 【Teradata】配置PE和AMP（congfig和reconfig工具、vprocmanager）

    The Reconfiguration and Configuration utilities are used to define the AMPs and PEs that operate tog ...

  5. c#基础知识之 Dataset 索引0没有值

    datatable绑定到dataGrieView,在刷新datatable的数据时,常会bug:索引0没有值或索引(int)x没有值 昨天弄了一个下午,发现bug原因: dataGridView中有数 ...

  6. ubuntu 安装 GCC 和 G++ C++ 开发环境

    1.先安装 :sudo apt-get install build-essential 2.查看 gcc 版本 然后安装 统一版本的 g++ gcc --version gcc (Ubuntu/Lin ...

  7. Linux之文件属性

    文件属性是什么? [root@luffy_boy-001 /]# ls -lhi /etc/hosts 129822 -rw-r--r--. 2 root root 198 Jan 11 2019 / ...

  8. ClickHouse最简单的安装方法

    安装包地址: https://packagecloud.io/Altinity/clickhouse 无需下载安装包,更新yum源即可!! 最后: yum install -y clickhouse- ...

  9. mysql 使用正则表达式查询

    SELECT * FROM `qq` where qq_name!='no' and qq_gender='女' and qq_location!='no' and qq_location!='' a ...

  10. nodejs服务端使用jquery操作Dom

    添加模块:   npm install jquery@3.2.1   npm install jsdom 引入模块:   var jsdom = require("jsdom"); ...