CSSASSCSSASSCSSASS

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

文章关键字 ‘setInterval’

简单效果——滚动展示

2010年01月29号，星期五

上回的文章里提到了文字滚屏效果。是无限滚动下去的。
现在弄一个可控制的单步滚动效果。

  1. var scrollHori={
  2.     locked:0,  //锁死
  3.     vector:0,  //左右向量
  4.     start:function(thiso){
  5.         if (scrollHori.locked == 0){
  6.             if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) {  //按到往左按钮，且在左侧有内容
  7.                 scrollHori.vector = -5;
  8.                 scrollHori.scroll();
  9.             }
  10.             if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){     //按到往右按钮，且在右侧有内容
  11.                 scrollHori.vector = 5;   
  12.                 scrollHori.scroll(); 
  13.             } 
  14.         }
  15.     },
  16.     scroll:function(){
  17.         var step=0;
  18.         var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length;  //单个内容总宽（包括margin）
  19.         play = setInterval(function(){
  20.                 if(size>step){   //单步滚动
  21.                     $id('rollBox').scrollLeft+=scrollHori.vector;
  22.                     step+=Math.abs(scrollHori.vector);
  23.                     scrollHori.locked = 1;   //滚动的时候锁死
  24.                 }
  25.                 else{
  26.                     scrollHori.stop();
  27.                 }
  28.             }, 5);
  29.     },
  30.     stop:function(){
  31.         if (window.play) {
  32.             clearInterval(window.play);   //清除反复
  33.             scrollHori.locked = 0;   //开锁
  34.         }
  35.     }
  36. }

竖排的话可以省力很多。
（不过下面的效果本来就更简单）

标签：, ,
发布在 javascript | 没有评论 »

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

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 条评论 »