如何实现这样的文字滚动效果

canzai 2008-11-07 04:08:35
在网上找了很久,就是找不到我要的那种效果:
如有五条信息,以一行的形式从右到左滚动,慢慢的滚动到左边之后停顿几秒后,再继续向左滚动,以此循环.
有点类似<marquee scrolldelay=1000 scrollamount=1000>信息一 信息二 信息三 信息四 信息五</marquee>
主要区别是<marquee>它是一下就跳了一大步再停，再停顿而不是慢慢滚动后再停几秒的。
...全文
1326 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
caiying2009 2009-02-27
  • 打赏
  • 举报
 回复 




<title>字幕_间断_向左</title>

<style>

*{}

ul{height:25px;width:3502px;overflow:visible;padding;margin:0;border:0px red solid}

li{LIST-STYLE-TYPE: none;float:left;height:25px;width:200px;padding-left:20px;;margin:0;font-size:12px;line-height:25px;}

</style>

<div id="picrun" style="height:25px;width:200px;overflow:hidden;border:1px #eee solid">

<ul id=piccons>

	<li><a href="">信息一</a>        

	<li><a href="">信息二</a>

	<li><a href="">信息三</a>

	<li><a href="">信息四</a>

	<li><a href="">信息五</a></li></ul>

</div>

<script type="text/JavaScript">

var oMarquee = document.getElementById("piccons"); //滚动对象

oMarquee.style.marginLeft=0;

var iLineWidth = 200; //单宽高度，像素

var iLineCount = 5; //实际列数

var iScrollAmount = 2; //每次滚动宽度，像素

var stopTime=3000;//间隔时间(3s)

var k=-1

var timer

oMarquee.innerHTML += oMarquee.innerHTML;

function run() {

	var ML=parseInt(oMarquee.style.marginLeft);

	oMarquee.style.marginLeft = (ML-iScrollAmount)+"px";

	if ( ML <= 0-iLineCount * iLineWidth ){

		oMarquee.style.marginLeft = 0;

		k=-1

	}

	if ( ML == k * iLineWidth+iScrollAmount) {

		k--

		timer=window.setTimeout( run, stopTime );

	}else 

		timer=window.setTimeout( run, 1);

}

oMarquee.onmouseover=function(){clearTimeout(timer)}

oMarquee.onmouseout=function(){setTimeout( run, stopTime )}



setTimeout( run, stopTime );

</script>
ydtzx20 2009-02-27
  • 打赏
  • 举报
 回复
猛人还不少
程序园苑 2009-02-26
  • 打赏
  • 举报
 回复
顶哈
zth603 2009-02-26
  • 打赏
  • 举报
 回复
很好用哦。谢谢楼主
天才在左疯子在右 2008-11-08
  • 打赏
  • 举报
 回复
很简单的呀，
第一，用<marquee>你所需要的滚动文字<marquuee>
第二 有dreamware 中的行为来做，你要插入层，还要设置时间轴，通过时间轴上的首尾密集程度来决定你滚动的快慢和方向，你想怎么饶就把鼠标怎么移动，但首尾必须相连啊
一把编程的菜刀 2008-11-08
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>css+js控制文字滚动 </title>

<script language="javascript">

<!--

function scrollup(o,d,c)

{

	if(d==c)

	{

		var t=o.firstChild.cloneNode(true);

		o.removeChild(o.firstChild);o.appendChild(t);

		t.style.marginLeft=o.firstChild.style.marginLeft='0px';

		hscroll(o);

	}

	else

	{

		ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);

		o.firstChild.style.marginLeft=-c+l+'px';

		window.setTimeout(function(){scrollup(o,d,c-l)},50);

	}

}

function hscroll(o)

{

	var w1=o.firstChild.offsetHeight,w2=o.offsetHeight;

	if(w1<=w2)return;

	tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);

}

function hs(o,d,c,p)

{

	c++;var t=(c>0?-c:c);o.firstChild.style.marginTop=t+'px';

	if(c==d)

	{

		if(d==0)

		{

			tc=window.setTimeout(function(){hs(o,p,0,p)},2500);

		}

		else

			tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);

	}

	else

		tc=window.setTimeout(function(){hs(o,d,c,p)},5);

}

//-->

</script> 

</head> 

<body> 

<div id="UpInfo" style="overflow:hidden; text-align:left; height:20px; width:200;">

	<div style="float:left; width:20px;">11</div>

	<div style="float:left; width:20px;">12</div>

	<div style="float:left; width:20px;">13</div>

	<div style="float:left; width:20px;">14</div>

	<div style="float:left; width:20px;">15</div>

	<div style="float:left; width:20px;">16</div>

	<div style="float:left; width:20px;">17</div>

	<div style="float:left; width:20px;">18</div>

	<div style="float:left; width:20px;">19</div>

	<div style="float:left; width:20px;">20</div>

</div>

				<script language="javascript">

				var tc;

				window.onload=function()

				{

					var o=document.getElementById('UpInfo');hscroll(o);

					window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginTop='0px';scrollup(o,90,0);},3000);

				}

				</script>

</body> 

</html>


再给一个
一把编程的菜刀 2008-11-08
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>css+js控制文字滚动 </title> 

<style> 

body{ 

  padding: 0px; 

  margin: 0px; 

  font: 70% verdana, geneva, arial, helvetica, sans-serif; 

  color: #000; 

  text-align: center 

  } 

#outer{ 

  padding: 0px; 

  margin: 0px; 

  width: 400px; 

  text-align: center 

  } 

#focus{ 

  border: #ccc 2px solid; 

  margin: 0px; 

  padding: 0px; 

  padding-top: 15px; 

  background: url(/images/tile.gif) #eee repeat-y left top; 

  width:394px; 

  position: relative; 

  height: 80px 

  } 

#description{ 

  height:80px; 

  overflow:hidden; 

  margin-right:0px; 

  float:left; 

  } 

.dis{ 

  float:left; 

  width:10px; 

  text-align: center; 

  padding-top:10px 

} 

#description ul, #description li { 

  float:left; 

display: inline; 

margin: 0; 

padding: 0; 

height:80px 

} 





.content a:active, 

.content a:visited, 

.content a:link { 

display: inline; 

text-decoration: none; 

} 



.content a:hover { 

  color: #ffffff; 

  display: inline; 

  text-decoration: none; 

} 

img {border:0px} 

</STYLE> 

</head> 

<body> 

<div id=outer> 

    <div id=focus> 

       <div class="dis"> 

           <img id="img_l" src="http://www.1netmedia.net/base/attachments/month_200708/btn_left.jpg" alt="向左滚动" onClick="doSlide(-1)" /> 

       </div> 

       <div id=description class=description> 

         <div id="content0"> 

         <ul id="content"  class=content>         

           <li style="width:75px; margin:0px;"> <a href="#">chinmo测试1</a> </li> 

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试2</a> </li> 

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试3</a> </li> 

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试4</a> </li> 

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试5 </a></li> 

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试6 </a></li> 

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试7 </a></li>

		   <li style="width:75px;margin:0px;"> <a href="#">chinmo测试8 </a></li>

         </ul> 

         </div> 

       </div> 

       <div class="dis"> 

           <img id="img_r" src="http://www.1netmedia.net/base/attachments/month_200708/btn_right.gif" alt="向右滚动" onClick="doSlide(1)" /> 

       </div> 

     </div> 

</div> 





<script> 

var img_pad=5//图片间隔 

var img_w=75//图片宽 

var img_n=4//每窗图片数 

document.write (" <style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";} </style>") 

var win_w=img_w*img_n+(img_pad*4)*(img_n-1)-5 

document.getElementById("description").style.width=win_w 

document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML 

var ok_obj=document.getElementById("content0").getElementsByTagName("LI") 

var ok=Math.ceil(ok_obj.length/4)-1; 

document.getElementById("content0").style.width=(ok+1)*win_w 

  var ele=document.getElementById("description"); 

  var w=ele.clientWidth; 

  var n=20,t=50; 

  var timers=new Array(n); 

  var k=0;doSlide(0); 

   

var ss=1,t2 

function doSlide(s){ 

clearTimeout(t2); 

ss=s; 

  if (k>=ok &&s>0){ele.scrollLeft=w;k=1;}//alert(ele.scrollLeft); 

  if (k <1 &&s <0){ele.scrollLeft=(ok-1)*w;k=ok-1} 

  k+=s; 

    var x=ele.scrollLeft 

    var d=k*w-x; 

    for(var i=0;i <n;i++)( 

      function(){ 

        if(timers[i]) clearTimeout(timers[i]); 

        var j=i; 

//        alert(x) 

        timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t); 

      } 

    )(); t2=setTimeout ("auto_scroll()",3000) 

} 

function auto_scroll(){ 

doSlide(ss) 

//var t2=setTimeout ("auto_scroll()",3600) 

} 

setTimeout ("auto_scroll()",2000) 

</script> 

</body> 

</html>

看下这个吧
canzai 2008-11-07
  • 打赏
  • 举报
 回复
有几位朋友的效果不是我说的往左边滚动一条，停顿一下，再继续往左边滚动第二条……，如此循环
wl__0464这位朋友贴出的代码比较接近，但由于本人对javascript不熟，能否有人帮改一下
chenjianwei2046 2008-11-07
  • 打赏
  • 举报
 回复
这是向左和向右，不过向右的写的不好，最好楼主看了改了再贴上来，还有这代码好像firefox没反应


left

<div id="marquees">

<a>信息一</a>

<a>信息二</a>

<a>信息三</a>

<a>信息四</a>

<a>信息五</a>

</div>



<script language="javascript">



    function $(id){

        return document.getElementById(id);

    }

    

    var marquees = $("marquees");

    function init(){



        previousScrollLeft=null; 

        stopScroll=false; 

        marqueesOffsetWidth=200; 

        marqueesScrollWidth = marquees.scrollWidth;

        with(marquees){

            noWrap=true; 

            style.width=marqueesOffsetWidth; 

            style.height=0;

            style.overflowX="hidden";

            style.overflowY="hidden";

            onmouseover=new Function("stopScroll=true");

            onmouseout=new Function("stopScroll=false");

        }

        marquees.innerHTML+=marquees.innerHTML;

        setInterval("scrollLeft()",20);

    }



    document.body.onload=init;



    function scrollLeft(){ 

        if(stopScroll==true){

            return;

        }

        previousScrollLeft=marquees.scrollLeft; 

        marquees.scrollLeft+=1;

        if(previousScrollLeft==marquees.scrollLeft){

                marquees.scrollLeft=marqueesScrollWidth - marqueesOffsetWidth + 1;

        }

    }  

    

</script>





right

<div id="marquees">

<a>信息一</a>

<a>信息二</a>

<a>信息三</a>

<a>信息四</a>

<a>信息五</a>

</div>



<script language="JavaScript">

    function $(id){

        return document.getElementById(id);

    }

    

    var marquees = $("marquees");

    function init(){



        previousScrollLeft=null; 

        stopScroll=false; 

        marqueesOffsetWidth=200; 

        marqueesScrollWidth = marquees.scrollWidth;

        with(marquees){

            noWrap=true; 

            style.width=marqueesOffsetWidth; 

            style.height=0;

            style.overflowX="hidden";

            style.overflowY="hidden";

            onmouseover=new Function("stopScroll=true");

            onmouseout=new Function("stopScroll=false");

        }

        marquees.innerHTML+=marquees.innerHTML;

        setInterval("scrollLeft()",20);

    }



    document.body.onload=init;



    function scrollLeft(){ 

        if(stopScroll==true){

            return;

        }

        previousScrollLeft=marquees.scrollLeft; 

        marquees.scrollLeft-=1;

        if(previousScrollLeft==marquees.scrollLeft){

                marquees.scrollLeft=marqueesScrollWidth - marqueesOffsetWidth + 1;

        }

    } 

</script>
wentimao 2008-11-07
  • 打赏
  • 举报
 回复
<marquee scrolldelay=50 behavior=alternate scrollAmount=1 width=500>信息一 信息二 信息三 信息四 信息五 </marquee>
wl__0464 2008-11-07
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)</title>

</head>

<body>

<script type="text/javascript">

var $ = function (id) {

    return "string" == typeof id ? document.getElementById(id) : id;

};



var Class = {

  create: function() {

    return function() {

      this.initialize.apply(this, arguments);

    }

  }

}



Object.extend = function(destination, source) {

    for (var property in source) {

        destination[property] = source[property];

    }

    return destination;

}



function addEventHandler(oTarget, sEventType, fnHandler) {

    if (oTarget.addEventListener) {

        oTarget.addEventListener(sEventType, fnHandler, false);

    } else if (oTarget.attachEvent) {

        oTarget.attachEvent("on" + sEventType, fnHandler);

    } else {

        oTarget["on" + sEventType] = fnHandler;

    }

};





var Scroller = Class.create();

Scroller.prototype = {

  initialize: function(idScroller, idScrollMid, options) {

    var oThis = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);

    

    this.SetOptions(options);

    this.Side = this.options.Side || ["up"];//方向

    this.scroller = oScroller;            //对象

    this.speed = this.options.Speed;    //速度

    this.timer = null;                    //时间

    this.pauseHeight = 0;                //定高

    this.pauseWidth = 0;                //定宽

    this.pause = 0;                        //定高(宽)

    this.side = 0;                        //参数

    

    //用于上下滚动

    this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight;

    this.heightList = oScrollMid.offsetHeight;

    

    //用于左右滚动

    this.widthScroller = parseInt(oScroller.style.width) || oScroller.offsetWidth;

    this.widthList = oScrollMid.offsetWidth;

    

    //js取不到css设置的height和width

    

    oScroller.style.overflow = "hidden";

    oScrollMid.appendChild(oScrollMid.cloneNode(true));

    oScrollMid.appendChild(oScrollMid.cloneNode(true));

    

    addEventHandler(oScroller, "mouseover", function() { oThis.Stop(); });

    addEventHandler(oScroller, "mouseout", function() { oThis.Start(); });

    

    this.Start();

  },

  //设置默认属性

  SetOptions: function(options) {

    this.options = {//默认值

      Step:            1,//每次变化的px量

      Speed:        20,//速度(越大越慢)

      Side:            ["up"],//滚动方向:"up"是上，"down"是下，"left"是左，"right"是右

      PauseHeight:    0,//隔多高停一次

      PauseWidth:    0,//隔多宽停一次

      //当上下和左右一起使用时必须设置PauseHeight和PauseWidth来设置转向位置

      PauseStep:    1000//停顿时间(PauseHeight或PauseWidth大于0该参数才有效)

    };

    Object.extend(this.options, options || {});

  }, 

  //转向

  Turn: function() {

    //通过设置方向数组的排列来转向

    this.Side.push(this.Side.shift().toLowerCase());

  },

  //上下滚动

  ScrollUpDown: function() {

    this.pause = this.pauseHeight;

    this.scroller.scrollTop = this.GetScroll(this.scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight);

    this.pauseHeight = this.pause;

    

    var oThis = this;

    this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);

  },

  //左右滚动

  ScrollLeftRight: function() {

    this.pause = this.pauseWidth;

    //注意:scrollLeft超过1400会自动变回1400 注意长度

    this.scroller.scrollLeft = this.GetScroll(this.scroller.scrollLeft, this.widthScroller, this.widthList, this.options.PauseWidth);

    this.pauseWidth = this.pause;

    

    var oThis = this;

    this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);

  },

  //获取设置滚动数据

  GetScroll: function(iScroll, iScroller, iList, iPause) {

    var iStep = this.options.Step * this.side;

    

    if(this.side > 0){

        if(iScroll >= (iList * 2 - iScroller)){ iScroll -= iList; }

    } else {

        if(iScroll <= 0){ iScroll += iList; }

    }

    

    this.speed = this.options.Speed;

    if(iPause > 0){

        if(Math.abs(this.pause) >= iPause){

            this.speed = this.options.PauseStep; this.pause = iStep = 0; this.Turn();

        } else {

            this.pause += iStep;

        }

    }

    

    return (iScroll + iStep);

  },

  //开始

  Start: function() {    

    //方向设置

    switch (this.Side[0].toLowerCase()) {

        case "right" :

            if(this.widthList < this.widthScroller) return;

            this.side = -1;

            this.ScrollLeftRight();

            break;

        case "left" :

            if(this.widthList < this.widthScroller) return;

            this.side = 1;

            this.ScrollLeftRight();

            break;

        case "down" :

            if(this.heightList < this.heightScroller) return;

            this.side = -1;

            this.ScrollUpDown();

            break;

        case "up" :

        default :

            if(this.heightList < this.heightScroller) return;

            this.side = 1;

            this.ScrollUpDown();

    }

  },

  //停止

  Stop: function() {

    clearTimeout(this.timer);

  }

};



window.onload = function(){

    new Scroller("idScroller", "idScrollMid",{ Side:["up","left"], PauseHeight:50, PauseWidth:400 });

}

</script>

<style>

.Scroller {}{line-height:50px; border:1px solid #000000; padding:0px 10px; height:50px; width:400px;}

.Scroller *{}{margin:0px; padding:0px;}

.ScrollMid {}{float:left;}

.ScrollMid ul{}{width:800px;float:left;}

.ScrollMid li{}{list-style:none; float:left; width:390px; padding-left:10px;}

</style>

<div id="idScroller" class="Scroller" style="width:400px; height:50px;">

  <div style="width:1600px">

    <div id="idScrollMid" class="ScrollMid">

      <ul>

        <li>111111111111</li>

        <li>2222222222222</li>

        <li>333333333333333</li>

        <li>4444444444444</li>

      </ul>

    </div>

  </div>

</div>

<div id="test"></div>

</body>

</html>

这个上下的 给你点思路
cloudgamer 2008-11-07
  • 打赏
  • 举报
 回复
这个或许适合你
Unity实现文字滚动效果
Unity实现文字滚动效果，可自适应文字长度，鼠标放入UI文字开始滚动，移出后恢复原位。
前端如何CSS实现文字滚动效果，鼠标悬浮停止滚动
1.前端如何CSS实现文字滚动效果，鼠标悬浮停止滚动 【内容介绍】 主要应用于web后台管理系统的头部实现文字滚动的效果，如何通过CSS来实现文字动态滚动的效果，核心应用于告警展示，重要通知等应用场景。 【页面效果...
【实战】基于SpringBoot+Vue开发的前后端分离在线工具项目
使用、动态菜单、打字机效果实现、网络爬虫完整实现、悬浮球实现、文件流操作、抽奖效果、滚动字幕效果、excel导入&导出、前后端服务打包部署全流程等丰富的知识功能点，视频教程详细完整。  
网页文字滚动代码
网页的文字滚动代码，适用淘宝店铺，可以实现各种文字滚动效果
TextView 实现文字滚动播放效果效果（跑马灯）
本代码，实现TextView的文字滚动播放效果，跑马灯特效，构成简约实用，感觉好点赞
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章