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

thycloud06 2010-01-29 11:17:07
如题
如何用JAVASCRIPT实现文字跑马灯（右往左跑）
最好能控制速度和文字大小
...全文
810 20 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
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 反复调用此方法 达到指标就停止
烟雨鹏城 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>
微信小程序跑马灯小程序-单机版源码.zip
微信小程序跑马灯小程序-单机版源码.zip
微信小程序实现文字跑马灯效果
主要为大家详细介绍了微信小程序实现文字跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html跑马灯
html 跑马灯 html 跑马灯 html 跑马灯
详解微信小程序实现跑马灯效果（附完整代码）
主要介绍了微信小程序跑马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现图片滚动的示例代码(类似走马灯效果)
下面小编就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章