CSSASSCSSASSCSSASS

三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之

文章关键字 ‘marquee’

简单效果的简单写法——无缝滚动字幕

2009年12月29号，星期二

先看看无缝滚动的效果，使用window的setInterval方法重复调用一个滚动函数。
关键的代码是

  1. function roll(){ 
  2.             if($$('box2').offsetTop-$$('wrap').scrollTop<=0)  {  //当滚动到第二部分的顶部位置时
  3.                 $$('wrap').scrollTop-=$$('box1').offsetHeight;      //重置至第一部分顶部位置,相当于$$('box').scrollTop=0;
  4.                 }
  5.             else{ 
  6.                 $$('wrap').scrollTop++ ;
  7.                 $$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop  //无他，参考值尔
  8.             } 
  9.         } 
  10. var start=setInterval(roll,speed);

而无缝的关键还在这里

  1. $$('box2').innerHTML=box1.innerHTML;  //拷贝一份内容跟随其后，使原内容之后还有内容

我原本要做的效果并非全如上面，我需要的效果是：单条为一步阶，进行间歇性循环无缝滚动。

其实提起滚动，应该立马会想起走马灯（marquee）。尽管对其一直有偏见，但我还是会给他个机会的。。。

  1. function func(){
  2.         $$('quee').stop();
  3.         setTimeout(func2,1000);
  4.     }
  5.     function func2(){
  6.         $$('quee').start();
  7.         setTimeout(func,1000);
  8.     }

延时1秒交叉调用marquee的内置函数start()和stop();

不过，scrollamount影响的步阶不准确啊，而且不能做到无缝么。好，将marquee拖出去斩了（marquee:冤枉啊~~~~~）

下面是新的做法

  1. function roll(){
  2.         wrap.scrollTop++;
  3.          if($$('box1').offsetHeight-wrap.scrollTop>0){  //尚未滚动到第二部分的顶部位置时
  4.              if(wrap.scrollTop%wrap.offsetHeight!=0)  //
  5.              {
  6.                 return(setTimeout(roll,20));     //20毫秒即递归一次
  7.              }
  8.              else{                //当滚动的累计距离达到显示域高度的倍数时
  9.                 return(setTimeout(roll,2000));  //等待2秒才递归调用
  10.              }
  11.          }
  12.          else{
  13.                 setTimeout("$$('wrap').scrollTop=0;roll()",2000);
  14.             }
  15.     }

运用递归，而没有用setInterval

标签：, , ,
发布在 Javascript | 3 条评论 »