如何用JAVASCRIPT实现文字跑马灯（右往左跑）

thycloud06 2010-01-29 11:17:07
如题
如何用JAVASCRIPT实现文字跑马灯（右往左跑）
最好能控制速度和文字大小
...全文
720 20 打赏 收藏 举报
写回复
20 条回复
切换为时间正序
当前发帖距今超过3年，不再开放新的回复
发表回复
thycloud06 2010-01-29
  • 打赏
  • 举报
 回复

<html>
<head><title>跑马灯大全</title>
</head>
<form name="shooterform" method="get">
<body onload="scroll();">
<table width="504" border="0">
<tr>
<td height="200"><DIV id=demo style="OVERFLOW: hidden; WIDTH:504px; HEIGHT: 200px" align=center>
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<table width="504" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="250">dsadsadsaaaaaaaaaaaa</td>
<td width="250">dsadsadsaaaaaaaaaaaa</td>
<td width="250">dsadsadsaaaaaaaaaaaa</td>
</table> </TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY>
</TABLE>
</DIV>
<div align="center">
<SCRIPT>
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
</div>
</td>
</tr>
</table>

</body>
</form>
</html>

这个可以 刚找到的 发给大家分享
KK3K2005 2010-01-29
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 thycloud06 的回复:]
感谢大家 楼上的 不行  跑完后面是空白 要等所有字显示完才能重新显示
[/Quote]
跑的内容先复制一个接在后面，这样第一段内容跑到底之后 马上设置 位移坐标为0 这样就感觉循环了
thycloud06 2010-01-29
  • 打赏
  • 举报
 回复
恩 我也不知道啊
从左往右的 我能搜到很多 右往左的一个没有
sunxing007 2010-01-29
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 thycloud06 的回复:]
感谢大家 楼上的 不行  跑完后面是空白 要等所有字显示完才能重新显示
[/Quote]
你是说我的么？ 还要怎么修正？
thycloud06 2010-01-29
  • 打赏
  • 举报
 回复
12楼的 可以 但是速度太快 把速度调慢了就一顿一顿的效果不够圆滑
thycloud06 2010-01-29
  • 打赏
  • 举报
 回复
感谢大家 楼上的 不行 跑完后面是空白 要等所有字显示完才能重新显示
Peasant_Engineer 2010-01-29
  • 打赏
  • 举报
 回复
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ page import="java.util.*"%>
<%@ page import="java.sql.*" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.mylink { COLOR: #00a82f; TEXT-DECORATION: none }
.mylink:hover { COLOR: #0000ff; TEXT-DECORATION: none }
</style>

</head>

<body topMargin=0>
<div id=demo style="overflow: hidden; height: 113; width: 105">
<div id=demo1>
<table align=left cellpadding=0 cellspacing=0 border=0 height="113" cellspacing="3" width="105">
<tr>

<td width="133" align="center" valign="top">
<a class=mylink href="#" target="_blank" style='FONT-SIZE: 13px; LINE-HEIGHT: 200%; font-name: 宋体'>
你好
</a>
</td>
<td width="133" align="center" valign="top">
<a class=mylink href="#" target="_blank" style='FONT-SIZE: 13px; LINE-HEIGHT: 200%; font-name: 宋体'>
咋可能
</a>
</td>

</tr>
</table>
</div>
<div id=demo2>

</div>
<script>
var speed=10
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
</body>
</html>
sunxing007 2010-01-29
  • 打赏
  • 举报
 回复 


<div style="height: 70px; width: 300px; border: solid red 1px; overflow: hidden">

		<div id="scrollDiv" style="height: 70px; line-height: 70px; width: 300px;position: relative; left: 300px;top: 0px; overflow-y: hidden;">

			<div style="float: left; height: 70px; line-height: 70px;">这里有一些文字</div> 

			<div>

				<img src="http://avatar.profile.csdn.net/1/D/2/2_xfcdxg.jpg" height="60" width="60"/>

				<img src="http://avatar.profile.csdn.net/B/3/F/2_warison2008.jpg" height="60" width="60"/>

			</div>

		</div>

</div>



<script>

	var d = document.getElementById('scrollDiv');

	

	document.body.onload = function(){

			setInterval(function(){

					d.style.left = parseInt(d.style.left) - 10; 

					if(parseInt(d.style.left)<-300){

							d.style.left = 300;

					}

			}, 100);

	}

</script>
itliyi 2010-01-29
  • 打赏
  • 举报
 回复 
<html>

 <head>

  <title> new document </title>

<script language="javascript">

	var strText ="笑话一则：小侄用崭新造句,一个崭新的植物人诞生了~~                 ";

	var i=1;

function run()

{

	strText= strText.substring(i,strText.length) +  strText.substring(0,i)

	document.frmtext.txtstr.value = strText;



	setTimeout( "run()",200 );

}

</script>

 </head>



 <body onload = "run()">

<form name="frmtext">

	<input type="text" name="txtstr" size=50>

</form>

 </body>

</html>
Peasant_Engineer 2010-01-29
  • 打赏
  • 举报
 回复
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ page import="java.util.*"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.mylink { COLOR: #00a82f; TEXT-DECORATION: none }
.mylink:hover { COLOR: #0000ff; TEXT-DECORATION: none }
</style>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</head>

<body topMargin=0>
<div id=demo style="overflow: hidden; height: 113; width: 970">
<div id=demo1>
<table align=left cellpadding=0 cellspacing=0 border=0 height="113" cellspacing="3" width="1005">
<tr>
<td width="133" align="center" valign="top">
<a class=mylink href="#" target="_blank" style='FONT-SIZE: 13px; LINE-HEIGHT: 200%; font-name: 宋体'>
你好
</a>
</td>
<td width="133" align="center" valign="top">
<a title="菜单样式仅供参考，一切以实物为准" class=mylink href="#" target="_blank" style='FONT-SIZE: 13px; LINE-HEIGHT: 200%; font-name: 宋体'>
不好
</a>
</td>
<td width="133" align="center" valign="top">
<a title="菜单样式仅供参考，一切以实物为准" class=mylink href="#" target="_blank" style='FONT-SIZE: 13px; LINE-HEIGHT: 200%; font-name: 宋体'>
很坏
</a>
</td>
<td width="133" align="center" valign="top">
<a title="菜单样式仅供参考，一切以实物为准" class=mylink href="#" target="_blank" style='FONT-SIZE: 13px; LINE-HEIGHT: 200%; font-name: 宋体'>
是的
</a>
</td>
</tr>
</table>
</div>
<div id=demo2>

</div>


</body>
</html>


你看看，是不是你要的效果！
thycloud06 2010-01-29
  • 打赏
  • 举报
 回复
<MARQUEE>这个可以吗？ </MARQUEE> 不行
thycloud06 2010-01-29
  • 打赏
  • 举报
 回复
要的是 从右往总的 中间不能断的 HTML的肯定会断
Peasant_Engineer 2010-01-29
  • 打赏
  • 举报
 回复
不好意思，这个是滚动图片的
dandande 2010-01-29
  • 打赏
  • 举报
 回复
<MARQUEE>这个可以吗？</MARQUEE>
Peasant_Engineer 2010-01-29
  • 打赏
  • 举报
 回复
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
sunxing007 2010-01-29
  • 打赏
  • 举报
 回复 


<div style="height: 40px; width: 300px; border: solid red 1px; overflow: hidden">

	<marquee dir='rtl' direction='left' onmouseover="this.stop();" onmouseout="this.start();"><span style="color: red;font-size: 10pt;">如何用JAVASCRIPT实现文字跑马灯（右往左跑）</span> <span style="font-size: 16pt;color: pink;">文字变大了变色了</span>最好能控制速度和文字大小cdefghijklmnopqrstuvwxyz</marquee>

</div>
xfcdxg 2010-01-29
  • 打赏
  • 举报
 回复
LZ说是JS吧？

[Quote=引用 1 楼 sunxing007 的回复:]
HTML code<divstyle="height: 25px; width: 300px; border: solid red 1px; overflow: hidden"><marqueedir='rtl'direction='left'onmouseover="this.stop();" onmouseout="this.start();">ab如题 如何用JAVASCRIPT实现文字跑马?-
[/Quote]
xfcdxg 2010-01-29
  • 打赏
  • 举报
 回复
套个DIV 然后控制DIV的left || margin-left

比如写个方法 每次加或减 数值 然后 setTimeout 反复调用此方法 达到指标就停止
道光2008 2010-01-29
  • 打赏
  • 举报
 回复
滚动文字？
sunxing007 2010-01-29
  • 打赏
  • 举报
 回复 


<div style="height: 25px; width: 300px; border: solid red 1px; overflow: hidden">

	<marquee dir='rtl' direction='left' onmouseover="this.stop();" onmouseout="this.start();">ab如题 如何用JAVASCRIPT实现文字跑马灯（右往左跑）最好能控制速度和文字大小cdefghijklmnopqrstuvwxyz</marquee>

</div>
相关推荐
网页版跑马灯与字符统计
跑马灯与字符统计，实现马灯的坐跑与右跑，同时有字符统计的功能
CSS与JavaScript的综合应用---跑马灯特效
前言： Javascript中的跑马灯是一种很吸引眼球的特效，通常是通过改变来实现的。再配合上CSS，达到的效果非常完美。 首先： 按照传统JavaScript的方法制作跑马灯的效果，包括设置文字内容、跑动速度、以及相应的输入框。 跑马灯 var msg="这是跑马灯，我跑啊跑啊跑"; //跑马灯的文字 var interval = 400; //跑动的速度 var
跑马灯特效
JavaScript中的跑马灯是一种很吸引眼球的特效，通常是通过改变来实现的。如果能更好的配合Css，便能够做到更加完美。首先我们按照传统的JavaScript的方法制作跑马灯的效果，包括文字内容、跑动速度，以及相应的输入框。请看下面的代码：    跑马灯var msg="这是跑马灯，我跑啊跑啊跑";           //跑马灯的文字var interval = 400
JS 跑马灯效果实现（很好用）
实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。 好用之处在于： 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实现代码，如果看不懂，可以跑这个列子 文字1 文字2 文字3 文字4 文字5 function test() { $("#RunTopic").find("li:first").appendTo(
CSS实现公告栏文字跑马灯特效（VUE组件）
VUE组件封装，支持动态内容、文字颜色大小、滚动速度、背景颜色和高度配置的跑马灯，方向从右往左，默认根据内容宽度计算滚动速度。
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-29 11:17
社区公告
暂无公告