CSSASSCSSASSCSSASS

简单效果——滚动展示  作者：ONEBOYS

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

  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. }

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

转发到新浪微博

相关文章:

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

标签： , ,

这篇文章发布于 2010年01月29号，星期五，16:52，归类于 javascript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(