純粋なjavascriptは4方向のテキストのシームレスなスクロール効果を実現します.

テキストのシームレスなスクロール効果を実現します.

  




  








  

    

      
   |   B   3 5 
      
   |                  
      
   |           10  / 
      
   |   B   3 5        11 
      
   |         14   10     
      
   |                  ？
      
   |        11 
      
   |   B   3 5
      
   |        11 
      
   |                 
    
     へ
     へ
  
  

  

  

    

      
   |   B   3 5 
      
   |                  
      
   |           10  / 
      
   |   B   3 5        11 
      
   |         14   10     
      
   |                  ？
      
   |        11 
      
   |   B   3 5
      
   |        11 
      
   |                 
    
     へ
     へ
  
  
  

    //       
    scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});
    scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});

    function scroll(container,options){
      var box = $(container);
      var boxUl = box.find('ul').eq(0);
      var LiHeight = 0; //     li    
      var cloneLiHeight = 0; //    li    
      var LiWidth = 0; //     li    
      var cloneLiWidth = 0; //    li    
      var Lis = boxUl.children();
      var btnPrev = box.find('.btnPrev');
      var btnNext = box.find('.btnNext');

      //    
      var defult= {
        vis : 2, //    
        autoPlay:true, //    
        speed :50, //    
        dir:'prev', //    
        btnHidden:false, //      
        type:'v' //         

      };
      var opt = $.extend({},defult,options);


      //  DOM  
      var lastClone=0; //      
      var lastCloneHeight=0;//        
      var allCloneHeight=0;//         
      var lastCloneWidth=0;
      var allCloneWidth=0;
      var visHeight=0; //    
      var visWidth=0;
      var boxUl_wrap;

      if(opt.type === "v"){ //    
        Lis.each(function(){
          $(this).height($(this).height());
          LiHeight += $(this).outerHeight(true);
        });
        lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
        lastCloneHeight = lastClone.outerHeight(true);
        allCloneHeight = lastClone.outerHeight(true);

        for(var i = 0; i < opt.vis ; i++){
          Lis.eq(i).clone().addClass('clone').appendTo(boxUl);
          allCloneHeight += Lis.eq(i).outerHeight(true);
        }

        visHeight = allCloneHeight - lastCloneHeight;
        cloneLiHeight = LiHeight + allCloneHeight;
        
        boxUl_wrap = $('<div></div>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
        boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap);

      }else if(opt.type ==="h"){ //    
        Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'});
        Lis.each(function(){
          $(this).width($(this).width());
          LiWidth += $(this).outerWidth(true);
        });

        lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
        lastCloneWidth= lastClone.outerWidth(true);
        allCloneWidth = lastClone.outerWidth(true);

        for(var j = 0; j < opt.vis ; j++){
          Lis.eq(j).clone().addClass('clone').appendTo(boxUl);
          allCloneWidth += Lis.eq(j).outerWidth(true);
        }
        visHeight = Lis.eq(0).outerHeight(true);
        visWidth = allCloneWidth - lastCloneWidth;
        cloneLiWidth = LiWidth + allCloneWidth;
        
        boxUl_wrap = $('<div></div>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
        boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap);
        box.css({'width':visWidth});
      }


      //      
      var timer = null;
      var scrollTop = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('top').replace('px',""));
            tmp--;
            boxUl.animate({'top':tmp},0,function(){
              if(tmp <= -(LiHeight + lastCloneHeight)){
                boxUl.css('top',-lastCloneHeight);
              }
            });
          },opt.speed);
      };

      var scrollDown = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('top').replace('px',""));
            tmp++;
            boxUl.animate({'top':tmp},0,function(){
              if(tmp >= 0){
                boxUl.css('top',-(LiHeight));
              }
            });
          },opt.speed);
      };

      var scrollLeft = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('left').replace('px',""));
            tmp--;
            boxUl.animate({'left':tmp},0,function(){
              if(tmp <= -(LiWidth + lastCloneWidth)){
                boxUl.css('left',-(lastCloneWidth));
              }
            });
          },opt.speed);
      };
      
      var scrollRight = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('left').replace('px',""));
            tmp++;
            boxUl.animate({'left':tmp},0,function(){
              if(tmp >= 0){
                boxUl.css('left',-(LiWidth));
              }
            });
          },opt.speed);
      };

      var scrollType = function(type,dir){
        if(Lis.length >= opt.vis){ //            ，       
          var sdir = typeof dir!=="undefined" ? dir : opt.dir;
          switch(type){
            case "v":
              if(sdir == "prev"){scrollTop();}else{scrollDown();}
              break;
            case "h":
              if(sdir == "prev"){scrollLeft();}else{scrollRight();}
          }
        }
      };


      if(opt.autoPlay){
        scrollType(opt.type);
      }

      //      
      box.find('#ulWrap').hover(function(){
        clearInterval(timer);
      },function(){
        scrollType(opt.type);
      });

      //      
      if(!opt.btnHidden){

        btnPrev.unbind('mouseover');
        btnNext.unbind('mouseover');

        btnPrev.mouseover(function(){
          scrollType(opt.type,"prev");
        });
        btnNext.mouseover(function(){
          scrollType(opt.type,"next");
        });
      }else{
        btnPrev.hide();
        btnNext.hide();
      }

    }
  

一部�{}
しかし、通�^document.write()は、代�aを入れて、垂直モードでliの高さheight()を持っています.原因は不明で、とても分かりません.
以上述べましたが、本文の内容は全部です.お好きになってください.