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

简单效果——滚动展示
作者:Neoxone    发表时间: 2010年01月29号,星期五     阅读:4,520 次

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

  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/$tag('li',$id('rollList')).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. 无缝滚动字幕

标签: , , ,

2 条评论 发表在“简单效果——滚动展示”上

  1. xy 说:

    这个代码找好久了,终于找到了。

    回复

  2. xixiAlly 说:

    非常棒!!!

    回复

留下回复

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