打印

如何制作连续向上滚动的文字？

cloudboy [楼主]

中级会员

帖子: 131
体力: 467
威望: 0
离线: 4 天

1^# 大中小发表于 2004-8-27 17:11

能改速度的，而且是连续滚动的，向上

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

huangna

天地一家春

荣誉管理团队

帖子: 2146
体力: 2029
威望: 6
当前: 上海长宁
离线: 26 天

专长 策划,项目管理,市场

2^# 大中小发表于 2004-8-27 17:17

那只能在FLASH里才能实现吧!在DW里也能吗?FP里倒是可以把从左往右的改成从下往上的.

人生本无意义。
我是女人。

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

cloudboy [楼主]

中级会员

帖子: 131
体力: 467
威望: 0
离线: 4 天

3^# 大中小发表于 2004-8-27 17:26

可以用JS实现（如下地址），不过速度太快了，不知道怎么改慢
http://www.pconline.com.cn/pcedu ... t/10303/146688.html

TOP

请大家尊重和保护奥运知识产权。

Sellen

微风香水

金牌会员

帖子: 2355
体力: 3421
威望: 2

专长 前端制作,ASP,AS

4^# 大中小发表于 2004-8-27 17:32

提示：您可以先修改部分代码再运行

Direction参数：up,down,left,right
Scrolldelay=数值　　值越大，滚得越慢。

满瓶不动半瓶摇,更何况不足半瓶...　　Upai

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

cloudboy [楼主]

中级会员

帖子: 131
体力: 467
威望: 0
离线: 4 天

5^# 大中小发表于 2004-8-27 17:42

楼上的这个不是连续的啊
我先试试Scrolldelay
没作用啊

TOP

marvellous

金翅擘海

版主

帖子: 11400
体力: 26524
威望: 140

6^# 大中小发表于 2004-8-27 17:48

速度调节在setInterval("scrollUp()",10);

<div id="marquees">
  <a href="#">你可曾有过无数的梦想，</a><br>
  <br>
  <a href="#">却在时光的流逝里幻灭 </a><br>
  <br>
  <a href="#">你可曾对未来期待憧憬，</a><br>
  <br>
  <a href="#">却在成长的岁月中迷失</a><br>
  <br>
</div> 
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
  style.width=0;
  style.height=marqueesHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscroll=true");
  onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0; 
function init(){
  templayer.innerHTML="";
  while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
  }
  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
  setInterval("scrollUp()",10);
}
document.body.onload=init;
function scrollUp(){
  if(stopscroll==true) return;
  preTop=marquees.scrollTop;
  marquees.scrollTop+=1;
  if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
  }
}
</script>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

cloudboy [楼主]

中级会员

帖子: 131
体力: 467
威望: 0
离线: 4 天

7^# 大中小发表于 2004-8-27 18:01

谢谢marvellous
非常感谢你！

TOP

steven19819

中级会员

帖子: 101
体力: 365
威望: 0
离线: 612 天

8^# 大中小发表于 2004-8-27 22:04

marvellous
你做的那个真的很棒,我受益非浅

TOP

haibo119

初级会员

帖子: 29
体力: 65
威望: 0
离线: 1213 天

9^# 大中小发表于 2004-8-28 10:32

谢谢

学习！学习！还是学习！
请大家不吝赐教……^^

TOP

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 77 天

10^# 大中小发表于 2005-7-20 11:54

改了下，以适应firefox。图片未加载完也不会出错了。
 <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
 <img src="images/flash8.gif">
 <img src="images/link/flashempire.gif">
 <img src="images/linklogo/shlogo.gif">
 <img src="images/link/deskcity.gif">
 <img src="images/linklogo/5dmeng.gif">
 <img src="http://www.blueidea.com/logo.gif">
 <img src="images/link/flashskylogo.gif">
 <img src="images/link/5dlogo88.gif">
 </div>
 <div id=demo2></div>
 </div>
   <script>
   var speed=30;
   var delay=500;
   var y=false;
   function init(){
   	y=true;
   _demo=document.getElementById("demo");
   _demo2=document.getElementById("demo2");
   _demo1=document.getElementById("demo1");
   //alert(_demo2.id+_demo2.innerHTML)
   _demo2.innerHTML=_demo1.innerHTML;
   //
   var MyMar=setInterval(Marquee,speed)
   _demo.onmouseover=function() {clearInterval(MyMar)}
   _demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  }
  //document.body.onload=init;
  window.onload=init;
   function Marquee(){
	   if(y==false)return;
	   //alert(_demo2.offsetTop)
	   if(_demo2.offsetTop-_demo.scrollTop<=0)
	   _demo.scrollTop-=_demo1.offsetHeight
	   else{
	   _demo.scrollTop++
	   }
   }
   </script>

提示：您可以先修改部分代码再运行

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 77 天

11^# 大中小发表于 2005-7-20 11:55

提示：您可以先修改部分代码再运行

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 77 天

12^# 大中小发表于 2005-7-20 12:04

aaaaaaaaa
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<div id="marquees" style="word-break: break-all; word-wrap: break-word;"> 
<a href="#">链接1</a>
<br> <a href="#">链接2</a>
<br> <a href="#">链接3</a>
<br> <a href="#">链接4</a>
<br> 
</div> 

<script language="javascript">
var marquees=document.getElementById("marquees");
marqueesHeight=40; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
//with(marquees){
marquees.noWrap=true; //这句表内容区不自动换行
marquees.style.width=200; //于是我们可以将它的宽度设为0，因为它会被撑大
marquees.style.height=marqueesHeight;
marquees.style.overflowY="hidden"; //滚动条不可见
marquees.onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动
marquees.onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动
//}
//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面：
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer"，直到"templayer"的高度大于内容区高度：
var templayer=document.getElementById("templayer");
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区：
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时，调用"scrollUp()"函数驱动滚动条：
setInterval("scrollUp()",40);
}
//document.body.onload=init;
window.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动 
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了，则向上滚动到和当前画面一样的位置
//当然不仅如此，同样还要向下滚动一个像素(+1)：
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-(marqueesHeight+1);
}
}
</script>

提示：您可以先修改部分代码再运行

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 77 天

13^# 大中小发表于 2005-7-20 12:05

<div id=demo style=overflow:hidden;height:20;width:380;>
     <div id=demo1>
     <TABLE cellSpacing=0 cellPadding=0 width=380 border=0>
     <TR>
     <TD height=18>&#183;<A href="http://skype.tom.com/" target=_blank><FONT color=#0000ff>清晰音质!Tom-Skype 1.2发布</FONT></A></TD>
     <TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/softnews/dongtai/0504/607814.html" target=_blank><FONT color=#0000ff>精彩!Longhorn 5048新特性图解</FONT></A></TD></TR>
     <TR><TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/softnews/cs/0504/607804.html" target=_blank><FONT color=#0000ff>WinServer 2003 SP1中文版发布</FONT></A></TD>
     <TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/softnews/cs/0504/606837.html" target=_blank><FONT color=#0000ff>不想试试吗?64位Windows免费得</FONT></A></TD></TR>
     <TR><TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/soft/wl/ftp/0504/607423.html" target=_blank><FONT color=#0000ff>请个MM帮你发挥G级邮箱的威力</FONT></A></TD>
     <TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/tuijian/system/other/0504/607702.html" target=_blank><FONT color=#0000ff>极尽声色:视频文件也能当屏保</FONT></A></TD></TR>
     <TR><TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/teach/empolder/system/0504/607498.html" target=_blank><FONT color=#0000ff>实战组策略-给局域网客户打补丁</FONT></A></TD><TD height=18>&#183;<FONT color=#0000ff>把美丽珍藏,手把手教你DV刻录</FONT></TD></TR>
     <TR><TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/empolder/net/vc/0504/606400.html" target=_blank><FONT color=#0000ff>微软VS.NET 2005 Beta 2初体验</FONT></A></TD>
     <TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/sj/famous/qilianshan/0504/607833.html" target=_blank><FONT color=#0000ff>Photoshop从头学49:路径面板</FONT></A></TD></TR>
     <TR><TD height=18>&#183;<FONT color=#0000ff>Dreamweaver2004视频宝典教程</FONT></TD><TD height=18>&#183;<A href="http://www.pconline.com.cn/pcedu/specialtopic/vtutorial/index.htm" target=_blank><FONT color=#0000ff>PConline视频教程专栏推出啦!</FONT></A></TD>
     </TR>
     </TABLE> 
</div>
 <div id=demo2></div>
 </div>
<script>
   var speed=100;
   //var delay=0;
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
   else{
   demo.scrollTop++
   //delay++;
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.onmouseover=function() {clearInterval(MyMar)}
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
   </script>

提示：您可以先修改部分代码再运行

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 77 天

14^# 大中小发表于 2005-7-20 12:08

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=javascript>
 var frmact = new Array();
 frmact[1]="http://www.baidu.com/s";
 frmact[2]="http://news.baidu.com/ns"
 frmact[3]="http://post.baidu.com/f";
 frmact[4]="http://mp3.baidu.com/m";
 frmact[6]="http://image.baidu.com/i";
 var frmtn = new Array();
 frmtn[1]="sfpro";
 frmtn[2]="news";
 frmtn[3]="baiduPostSearch";
 frmtn[4]="baidump3";
 frmtn[6]="baiduimage";
 var frmct = new Array();
 frmct[1] = "";
 frmct[2] = "";
 frmct[3] = "352321536";
 frmct[4] = "134217728";
 frmct[6] = "201326592";
 var frmlm = new Array();
 frmlm[1] = "";
 frmlm[2] = "";
 frmlm[3] = "65536";
 frmlm[4] = "-1";
 frmlm[6] = "-1";
 var frmz = new Array();
 frmz[1] = "";
 frmz[2] = "";
 frmz[3] = "";
 frmz[4] = "";
 frmz[6] = "0";
 var frmrn = new Array();
 frmrn[1] = "";
 frmrn[2] = "";
 frmrn[3] = "10";
 frmrn[4] = "";
 frmrn[6] = "";
 var bd_idx="1";
function bd_chg_idx(idx)
{
 bd_idx=idx;
}
function gowhere(formname)
{
 var url;
 var idx = bd_idx;
 if (frmact[idx] == null || frmact[idx] == "")  idx = "1";
 url = frmact[idx];
 if (frmtn[idx] != "") document.search_form.tn.value = frmtn[idx];
 if (frmct[idx] != "") document.search_form.ct.value = frmct[idx];
 if (frmlm[idx] != "") document.search_form.lm.value = frmlm[idx];
 if (frmz[idx] != "") document.search_form.z.value = frmz[idx];
 if (frmrn[idx] != "") document.search_form.rn.value = frmrn[idx];
 formname.method = "get";
 formname.action = url;
 return true;
} 
</SCRIPT>
<script>
function showMarqueeBox(id, lh, speed, delay) {
	var o = document.getElementById(id);
	var p = false;
	var t;
	o.style.overflow = "hidden";
o.style.height = o.style.lineHeight = lh + "px";
	o.style.lineHeight = "24px";
	o.style.height = o.style.lineHeight;
	o.onmouseover = function() { p = true; }
	o.onmouseout = function() {	p = false; }
	function start() {
		t = setInterval(scrolling, speed);
		if (!p) o.scrollTop++;
	}
	function scrolling() {
		if ((o.scrollTop % lh) != 0) {
			o.scrollTop++;
			document.getElementById("sss").value=o.scrollHeight;
			if (o.scrollTop >= o.scrollHeight - lh - 1) o.scrollTop = 0;
		} else {
			clearInterval(t);
			setTimeout(start, delay);
		}
	}
	setTimeout(start, delay);
}
</script>
<style type="text/css">
.bdsc { color:#C60A00; }
.bdch { color:#000000; font-size:13px;}
.bdchmisc { color:#000000; font-size:14px; }
</style>
<br>
<table width="500" border="0" cellPadding="0" cellSpacing="0" style="font-size:12px; background-color:#FFFFFF; border:1px solid #000000;">
<form name=search_form onsubmit="return gowhere(this)" target=_blank>
<input name=tn type=hidden>
<input name=ct type=hidden>
<input name=lm type=hidden>
<input name=z type=hidden>
<input name=rn type=hidden>
<tr> 
<td width="128" rowspan="2" align="center" style="padding-top:19px;">
<a href="http://d.baidu.com/index.php?tn=sfpro" target="_blank"><img src="http://img.baidu.com/img/union/logo_union2.gif" alt="百度中文搜索引擎" border="0"></a>
</td>
<td colspan="2">
<div style="float:left; line-height:24px; width:300px; background-color:#CCCCCC">
<a href="#" target="_blank" class="bdchmisc">原音铃声</a> <a href="#" target="_blank" class="bdchmisc">原音铃声</a>
</div>
<div id="marqueebox" style=" background-color:#999999; line-height:24px;font-size:14px;">
<a href="#" target="_blank" class="bdsc">童话</a> <a href="#" target="_blank" class="bdsc">酸酸甜甜就是我</a><br>
<a href="#" target="_blank" class="bdsc">飘移</a> <a href="#" target="_blank" class="bdsc">莫斯科没有眼泪</a><br>
<a href="#" target="_blank" class="bdsc">一路向北</a> <a href="#" target="_blank" class="bdsc">你到底爱谁</a><br>
<a href="#" target="_blank" class="bdsc">哎呀</a> <a href="#" target="_blank" class="bdsc">回来我的爱</a><br>
<a href="#" target="_blank" class="bdsc">野蛮游戏</a> <a href="#" target="_blank" class="bdsc">千年之恋</a><br>
<a href="#" target="_blank" class="bdsc">童话</a> <a href="#" target="_blank" class="bdsc">酸酸甜甜就是我</a>
</div>
<script>showMarqueeBox("marqueebox", 24, 20, 200);</script></td>
</tr>
<tr>
<td height="25" colspan="2">
<input id=word name=word style="vertical-align:top; border:1px solid #665B8E; color:#333333; width:193px; padding-left:3px; padding-top:2px;" value="请输入关键字" onMouseOver="this.focus()" onBlur="if (this.value =='') this.value='请输入关键字'" onFocus="this.select()" onClick="if (this.value=='请输入关键字') this.value=''">
<input name=_si type=image id=_si src="http://img.baidu.com/img/union/search_l.gif" align="middle">
</td>
</tr>
<tr>
<td width="128" height="27" align="center">
<a href="http://union.baidu.com/paihang/index.php?class=13" target="_blank" class="bdsc">地方热线排行榜</a>
</td>
<td width="203" class="bdch">
<label for="_sv_1"><input type=radio name=_sv value="1" id=_sv_1 onClick="bd_chg_idx('1');" checked>网页</label>
<label for="_sv_4"><input type=radio name=_sv value="4" id=_sv_4 onClick="bd_chg_idx('4');">MP3</label>
<label for="_sv_6"><input type=radio name=_sv value="6" id=_sv_6 onClick="bd_chg_idx('6');">图片</label>
<label for="_sv_3"><input type=radio name=_sv value="3" id=_sv_3 onClick="bd_chg_idx('3');">贴吧</label>
</td>
<td width="211">
<a href="http://game.baidu.com/traf/click.php?id=708&url=http://gongshe.baidu.com" target="_blank" class="bdsc" style="text-decoration:none;"><strong>百度公社</strong></a>
</td>
</tr>
</form>
</table>
<script language="javascript" src="http://ucstat.baidu.com/embed.php?cid=70590&mac=4f8ac48e9f62c501f7095dea7b3ce6fa"></script>
</body>
</html>
<input id="sss" type="hidden" name="textfield">

提示：您可以先修改部分代码再运行

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 77 天

15^# 大中小发表于 2005-7-20 12:31

这是向右移动效果，向左的话稍改下就也可以了。大家可以专门来贴一个关于如何用javascript来控制向上向下，向左向右，连续，停顿滚动的效果。总之越多越好哦。

提示：您可以先修改部分代码再运行

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

kuzi1314

外号牛13

银牌会员

帖子: 473
体力: 1421
威望: 0
当前: 浙江温州
离线: 22 天

16^# 大中小发表于 2005-7-20 12:52

收藏了~~~
好详细啊

谢谢了
~

认真！
细心！

TOP

Huper

初级会员

帖子: 38
体力: 123
威望: 0
离线: 76 天

17^# 大中小发表于 2005-7-20 12:57

太棒了！收藏！

TOP

icried

中级会员

帖子: 90
体力: 284
威望: 0
离线: 101 天

18^# 大中小发表于 2005-7-20 13:46

经典收藏哇，呵呵

加油加油！！

TOP

szrenli

新手上路

帖子: 3
体力: 7
威望: 0
离线: 69 天

19^# 大中小发表于 2008-4-14 02:27

找你好久了～咋-才出现呢！！！

谢谢啊！

TOP

jxxk825

初级会员

帖子: 47
体力: 146
威望: 0
离线: 10 天

20^# 大中小发表于 2008-6-27 14:37

借此话题，顺便问下如何解决改滚动字的闪烁问题？？

提示：您可以先修改部分代码再运行

没有失败！永远微笑

TOP