Nahtloses Scroll-Plugin basierend auf dem Schreiben von jQuery

Nahtloses Scroll-Plugin basierend auf dem Schreiben von jQuery_jquery

WBOY

Freigeben： 2016-05-16 16:40:33

Original

1055 Leute haben es durchsucht

Lassen Sie uns zunächst einen Blick auf das HTML-Gerüst werfen, wie folgt:

<div class="box">
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>
</div>

Nach dem Login kopieren

Die Struktur ist einfach und klar, es gibt nicht viel zu sagen.

Lassen Sie uns über das Umsetzungsprinzip sprechen:
Das div-Feld ist das äußerste Feld. Geben Sie ihm eine bestimmte Breite und Höhe. Denken Sie daran, dem Feld den Stil „overflow:hidden“ (verborgener Inhalt) hinzuzufügen, da das Scrollen definitiv über das Feld hinausgeht.
Wir verwenden js, um den Rand des ul-Tags zu steuern und einen Bildlauf zu erreichen. Horizontales Scrollen steuert den linken Rand; vertikales Scrollen steuert den oberen Rand;
Im Anfangszustand müssen wir auch bedingte Beurteilungen vornehmen, um zu bestimmen, ob gescrollt werden soll. Das heißt: Wenn die Länge von ul kleiner als die Länge des äußeren Felds ist, wird kein Bildlauf durchgeführt, andernfalls wird ein Bildlauf durchgeführt.
Die Länge von ul wird berechnet, indem die Länge eines einzelnen Li in ul mit der Anzahl der Li multipliziert wird. ul_width = li_width * li_num;
Der Grund, warum ein nahtloses Scrollen erreicht werden kann, besteht darin, dass wir jedes Mal, wenn die Länge des Scrollens gerade größer als die Länge eines einzelnen Li ist, das erste Li von ul an das Ende von ul verschieben und der Zyklus immer wieder von vorne beginnt ( darüber
Eine Sache: Sie können es überprüfen, ohne zuerst overflow:hidden festzulegen.

Das Erzählen eines Prinzips ist ein Test für meine Fähigkeit, mich auszudrücken. Ich hoffe, ich habe es klar erklärt.

Schauen wir uns den Implementierungscode des Plug-Ins an:

(function ($) {
  $.fn.Scroll = function (options) {
    //将当前上下文对象存入root
    var root = this;

    //默认配置
    var settings = {
      speed: 40,   //滚动速度,值越大速度越慢
      direction: "x" //滚动方向("x"或者"y" [x横向;y纵向])
    };

    //不为空，则合并参数
    if (options)
      $.extend(settings, options);


    var timer = [];   //计时器
    var marquee;    //滚动器(函数)
    var isRoll;     //判断是否滚动(函数)

    var _ul = $("> ul", root);     //ul标签
    var _li = $("> ul > li", root);   //li标签(集合)

    var li_num = _li.length;  //li标签个数
    var li_first = _li.first();  //获取单个li标签


    //判断为纵向还是横向，并进行相应操作
    if (settings.direction == "x") {
　　　　　　　
　　　　　　 var li_w = li_first.outerWidth(true); //单个li标签的宽度
　　　　　　 var ul_w = li_w * li_num; 　　　　　　 //ul标签的宽度

      _ul.css({ width: ul_w }); //设置ul宽度

      marquee = function () {
        _ul.animate({ marginLeft: "-=1" }, 0, function () {
          var _mleft = Math.abs(parseInt($(this).css("margin-left")));
          if (_mleft > li_w) { //滚动长度一旦大于单个li的长度
            $("> li:first", $(this)).appendTo($(this)); //就把第一个li移到最后
            $(this).css("margin-left", 0); //滚动长度归0
          }
        });
      };
      //ul长度小于box长度时则不滚动，反之滚动
      isRoll = function (t) {
        if (ul_w <= root.width())
          clearInterval(t);
        else
          marquee();
      }
    }
    else {
　　　　　　 var li_h = li_first.outerHeight(true); //单个li标签的高度 
　　　　　　 var ul_h = li_h * li_num; //ul标签的高度

      _ul.css({ height: ul_h }); //设置ul高度

      marquee = function () {
        _ul.animate({ marginTop: "-=1" }, 0, function () {
          var _mtop = Math.abs(parseInt($(this).css("margin-top"))); //取绝对值
          if (_mtop > li_h) { 
            $("> li:first", $(this)).appendTo($(this));
            $(this).css("margin-top", 0);
          }
        });
      };
      //ul长度小于box长度时则不滚动，反之滚动
      isRoll = function (t) {
        if (ul_h <= root.height())
          clearInterval(t);
        else
          marquee();
      }
    }

    //遵循链式原则，并进行初始化
    return root.each(function (i) {
      //超出内容隐藏，防止用户没写overflow样式
      $(this).css({ overflow: "hidden" });

      timer[i] = setInterval(function () {
        isRoll(timer[i]);
      }, settings.speed);

      //鼠标进入停止滚动，离开继续滚动
      $(this).hover(function () {
        clearInterval(timer[i]);
      }, function () {
        timer[i] = setInterval(function () {
          isRoll(timer[i]);
        }, settings.speed);
      });

    });

  };
})(jQuery);

Nach dem Login kopieren

Die grundlegenden Kommentare zur Codebeschreibung sind sehr klar geschrieben. Nachfolgend eine Erläuterung einzelner Wissenspunkte:

1.) var timer=[]; Der Timer wurde vorher nicht als Array-Typ deklariert, da es zwei nahtlose Scroll-Anwendungen gleichzeitig auf der Seite gab (zur Demonstration von horizontalem und vertikalem Scrollen). ), es erschien Bug.

Da sich die beiden einen Timer teilen, wird auch der Timer des anderen gelöscht, wenn die Maus einen von ihnen betritt. Ändern Sie dann den Code, um ihn als Array-Objekt zu deklarieren, und implementieren Sie dann
mit root.each() Jetzt verfügt jede Plug-in-Anwendung über einen eigenen unabhängigen Timer und stört sich nicht gegenseitig. Mit anderen Worten: Dieses Plug-in unterstützt mehrere nahtlose Bildlaufanwendungen gleichzeitig auf der Seite.

2.) Funktion „outerWidth() /outerHeight()“. Diese Funktion ist leistungsfähiger, sie ermittelt mehr als nur die Breite/Höhe des Elements,

Eigentlich äußereWidth()=width borderLeft borderRight marginLeft marinRight;
Wenn es auf „true“ gesetzt ist, also „outerWidth(true),“ wird auch die Auffüllung berechnet:
äußereWidth()=Breite borderLeft borderRight marginLeft marinRight paddingLeft paddingRight;

Wie wäre es damit? Ist es nicht sehr mächtig?

Der DEMO-Code ist unten angegeben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
  *{ margin:0; padding:0;}
  ul,ul li{ list-style:none;}  
  .wrap{ width:1000px; margin:50px auto;}  
  .box1,.box2,.box3{ overflow:hidden; float:left;border:1px solid gray;}  
  .box1{ width:200px; height:450px;}
  .box1 ul li{ width:200px; height:100px;} 
  .box2,.box3{ width:450px;height:150px; margin:40px;}
  .box2 ul li,.box3 ul li{ width:100px; height:150px; float:left;}
  
</style>
</head>

<body>
<div class="wrap">

  <div class="box1">
    <ul>
      <li>111纵向</li>
      <li>222纵向</li>
      <li>333纵向</li>
      <li>444纵向</li>
      <li>555纵向</li>
      <li>666纵向</li>
    </ul>
  </div>

  <div class="box2">
    <ul>
      <li>111横向</li>
      <li>222横向</li>
      <li>333横向</li>
      <li>444横向</li>
      <li>555横向</li>
      <li>666横向</li>
    </ul>
  </div> 
  
  <div class="box3">  
    <ul>
      <li>ul长度小于box长度，不滚动</li>
      <li>222横向</li>
      <li>333横向</li>      
    </ul>
  </div>  
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.similar.scroll.js"></script>
<script type="text/javascript">
  $(function () {
    //奇数背景设置为灰色
    $('.box1 li:even,.box2 li:even,.box3 li:even').css({ backgroundColor: "gray" });

    $(".box1").Scroll({ direction: "y" }); //设置为纵向滚动
    $(".box2").Scroll(); //默认横向滚动
    $(".box3").Scroll();
  });
</script>
</body>
</html>

Nach dem Login kopieren

Effektbild:

Aufgrund von Stilproblemen in der Demo können Sie es selbst verschönern.