如何用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>
相关推荐
发帖
JavaScript

8.7w+

社区成员

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