検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は 4 方向のテキストのシームレスなスクロール効果を実装します

JavaScript は 4 方向のテキストのシームレスなスクロール効果を実装します

PHPz
PHPzオリジナル
2016-05-16 15:54:411237ブラウズ

この記事では主に、純粋な JavaScript を使用した制御可能な 4 方向のテキストのシームレスなスクロールのコードを紹介します。必要な友人は非常に効果的です。

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

<!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>文字滚动</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">

  <p id="textbox" class="textbox">
    <ul>
      <li>汽车 | 运动B级车降3万5 </li>
      <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
      <li>教育 | 各省前三报考华工重奖10万元/人</li>
      <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
      <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
      <li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>汽车 | 运动B级车降3万5</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
    </ul>
    <a href="#" class="btnPrev">向左</a>
    <a href="#" class="btnNext">向右</a>
  </p>
  <br>
  <br>
  <p id="textbox2" class="textbox">
    <ul>
      <li>汽车 | 运动B级车降3万5 </li>
      <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
      <li>教育 | 各省前三报考华工重奖10万元/人</li>
      <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
      <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
      <li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>汽车 | 运动B级车降3万5</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
    </ul>
    <a href="#" class="btnPrev">向上</a>
    <a href="#" class="btnNext">向下</a>
  </p>
  <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">

    //四方向无缝滚动
    scroll(&#39;#textbox&#39;,{vis:2,btnHidden:false,dir:&#39;prev&#39;,type:&#39;h&#39;});
    scroll(&#39;#textbox2&#39;,{vis:3,btnHidden:false,dir:&#39;prev&#39;,type:&#39;v&#39;});

    function scroll(container,options){
      var box = $(container);
      var boxUl = box.find(&#39;ul&#39;).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(&#39;.btnPrev&#39;);
      var btnNext = box.find(&#39;.btnNext&#39;);

      //默认参数
      var defult= {
        vis : 2, //显示个数
        autoPlay:true, //自动播放
        speed :50, //滚动速度
        dir:&#39;prev&#39;, //滚动方向
        btnHidden:false, //按钮是否隐藏
        type:&#39;v&#39; // 水平或者垂直方向

      };
      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(&#39;:last&#39;).clone().addClass(&#39;clone&#39;).prependTo(boxUl);
        lastCloneHeight = lastClone.outerHeight(true);
        allCloneHeight = lastClone.outerHeight(true);

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

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

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

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

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


      //添加事件处理
      var timer = null;
      var scrollTop = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css(&#39;top&#39;).replace(&#39;px&#39;,""));
            tmp--;
            boxUl.animate({&#39;top&#39;:tmp},0,function(){
              if(tmp <= -(LiHeight + lastCloneHeight)){
                boxUl.css(&#39;top&#39;,-lastCloneHeight);
              }
            });
          },opt.speed);
      };

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

      var scrollLeft = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css(&#39;left&#39;).replace(&#39;px&#39;,""));
            tmp--;
            boxUl.animate({&#39;left&#39;:tmp},0,function(){
              if(tmp <= -(LiWidth + lastCloneWidth)){
                boxUl.css(&#39;left&#39;,-(lastCloneWidth));
              }
            });
          },opt.speed);
      };
      
      var scrollRight = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css(&#39;left&#39;).replace(&#39;px&#39;,""));
            tmp++;
            boxUl.animate({&#39;left&#39;:tmp},0,function(){
              if(tmp >= 0){
                boxUl.css(&#39;left&#39;,-(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(&#39;#ulWrap&#39;).hover(function(){
        clearInterval(timer);
      },function(){
        scrollType(opt.type);
      });

      //按钮是否隐藏
      if(!opt.btnHidden){

        btnPrev.unbind(&#39;mouseover&#39;);
        btnNext.unbind(&#39;mouseover&#39;);

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

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

いくつかの問題:

ローカルテストでは問題ありませんが、ドキュメントを通して.write() がコードを入力して実行すると、垂直モードで li の height() を取得する際に問題が発生します。理由は不明で非常に不可解です。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

その他の関連チュートリアルについては、JavaScript 基本チュートリアル

を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：AngularJSフォームの詳しい説明使い方_AngularJS次の記事：AngularJSフォームの詳しい説明使い方_AngularJS

関連記事

続きを見る