純javascript實(shí)現(xiàn)四方向文本無(wú)縫滾動(dòng)效果

更新時(shí)間：2015年06月16日 10:38:05 投稿：hebedich

本文主要給大家分享了使用純javascript實(shí)現(xiàn)的可控制的四方向文本無(wú)縫滾動(dòng)的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。

實(shí)現(xiàn)一個(gè)文本無(wú)縫滾動(dòng)的效果：

<!DOCTYPE html>  
<!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->
<head>
<title>文字滾動(dòng)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style type="text/css">
*{margin:0;padding:0;}
body{padding:20px;}
 .textbox{border:1px solid #ddd;width:auto;overflow: hidden;}
 .textbox ul{list-style: none;position: relative;}
 .textbox ul li{padding:5px 0;}
</style>
</head>
<body class="home-page">

  <div id="textbox" class="textbox">
    <ul>
      <li>汽車 | 運(yùn)動(dòng)B級(jí)車降3萬(wàn)5 </li>
      <li>家居 | 這么厲害的裝修 女人真的要坐不住了</li>
      <li>教育 | 各省前三報(bào)考華工重獎(jiǎng)10萬(wàn)元/人</li>
      <li>汽車 | 運(yùn)動(dòng)B級(jí)車降3萬(wàn)5 平行進(jìn)口車加價(jià)11萬(wàn)</li>
      <li>健康 | 濫用激素釀苦果 14歲男孩10年不長(zhǎng)個(gè)兒</li>
      <li>數(shù)碼 | 最新手機(jī)報(bào)價(jià) 說(shuō)好的寬帶降費(fèi)提速呢？</li>
      <li>汽車 | 平行進(jìn)口車加價(jià)11萬(wàn)</li>
      <li>汽車 | 運(yùn)動(dòng)B級(jí)車降3萬(wàn)5</li>
      <li>汽車 | 平行進(jìn)口車加價(jià)11萬(wàn)</li>
      <li>運(yùn)動(dòng) | 恒大亞冠生死戰(zhàn) 猜比分贏正版球衣</li>
    </ul>
    <a href="#" class="btnPrev">向左</a>
    <a href="#" class="btnNext">向右</a>
  </div>
  <br>
  <br>
  <div id="textbox2" class="textbox">
    <ul>
      <li>汽車 | 運(yùn)動(dòng)B級(jí)車降3萬(wàn)5 </li>
      <li>家居 | 這么厲害的裝修 女人真的要坐不住了</li>
      <li>教育 | 各省前三報(bào)考華工重獎(jiǎng)10萬(wàn)元/人</li>
      <li>汽車 | 運(yùn)動(dòng)B級(jí)車降3萬(wàn)5 平行進(jìn)口車加價(jià)11萬(wàn)</li>
      <li>健康 | 濫用激素釀苦果 14歲男孩10年不長(zhǎng)個(gè)兒</li>
      <li>數(shù)碼 | 最新手機(jī)報(bào)價(jià) 說(shuō)好的寬帶降費(fèi)提速呢？</li>
      <li>汽車 | 平行進(jìn)口車加價(jià)11萬(wàn)</li>
      <li>汽車 | 運(yùn)動(dòng)B級(jí)車降3萬(wàn)5</li>
      <li>汽車 | 平行進(jìn)口車加價(jià)11萬(wàn)</li>
      <li>運(yùn)動(dòng) | 恒大亞冠生死戰(zhàn) 猜比分贏正版球衣</li>
    </ul>
    <a href="#" class="btnPrev">向上</a>
    <a href="#" class="btnNext">向下</a>
  </div>
  <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">

    //四方向無(wú)縫滾動(dòng)
    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');

      //默認(rèn)參數(shù)
      var defult= {
        vis : 2, //顯示個(gè)數(shù)
        autoPlay:true, //自動(dòng)播放
        speed :50, //滾動(dòng)速度
        dir:'prev', //滾動(dòng)方向
        btnHidden:false, //按鈕是否隱藏
        type:'v' // 水平或者垂直方向

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


      //構(gòu)建DOM結(jié)構(gòu)
      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){ //顯示個(gè)數(shù)不能多于列表個(gè)數(shù)，否則不顯示效果
          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();
      }

    }
  </script>
</body>
</html>

一些問(wèn)題：

本地測(cè)試沒(méi)問(wèn)題，但是通過(guò)document.write()把代碼輸入執(zhí)行后，垂直模式下的li的高度height()獲取會(huì)有問(wèn)題。原因不明,非常不解..

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: