阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.advanced news ticker 中文API文档

      插件 jQuery.advanced news ticker 中文API文档 https://github.com/risq/jquery-advanced-news-ticker JQuery Advanced News Ticker 1.0.11

      A powerful, flexible and animated vertical news ticker plugin for JQuery. JQuery Advanced News Ticker provides multiple callbacks and methods to allow a maximum flexibility and an easy implementation into any project.

      DEMO

      JQuery Advanced News Ticker 1.0.1 Demo

      Usage

      HTML: a simple list, which may be fully customized.

      <ul class="newsticker">
          <li>Etiam imperdiet volutpat libero eu tristique.</li>
          <li>Curabitur porttitor ante eget hendrerit adipiscing.</li>
          <li>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</li>
          <li>Nunc ultrices tortor eu massa placerat posuere.</li>
      </ul>
      
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="js/newsTicker.js"></script>
      

      Basic usage :

      $('.newsticker').newsTicker();
      

      With custom parameters :

      $('.newsticker').newsTicker({
          row_height: 48,
          max_rows: 2,
          speed: 600,
          direction: 'up',
          duration: 4000,
          autostart: 1,
          pauseOnHover: 0
      });
      

      With (custom) control buttons :

      $('.newsticker').newsTicker({
          row_height: 64,
          speed: 800,
          prevButton:  $('#prev-button'),
          nextButton:  $('#next-button'),
          stopButton:  $('#stop-button'),
          startButton: $('#start-button')
      });
      

      With callbacks :

      $('.newsticker').newsTicker({
          max_rows: 1,
          duration: 6000,
          startButton: $('.start'),
          hasMoved: updateInfos,
          start: function() {
              console.log('newsTicker just started !');
          },
          pause: function() {
              console.log('newsTicker has been paused.');
          }
      });
      
      function updateInfos() {
          //...
      }
      

      With methods :

      var nt = $('.newsticker').newsTicker({
          autostart: 0,
          speed: 400
      });
      
      nt.newsTicker('start');
      
      $('.newsTicker-header').hover(function() {
          nt.newsTicker('pause');
      }, function() {
          nt.newsTicker('unpause');
      });
      
      nt.newsTicker('updateOption','speed',1000);
      nt.newsTicker('updateOption','direction','down');
      

      Options & Callbacks

      ParameterUsageType/ValuesDefault value
      row_heightdefines the height (in px) of one rowint22
      max_rowdefines the number of rows displayed at the same timeint3
      speeddefines the animation speed (in ms)of the rows moving up or downint (in ms)400
      durationdefines the times (in ms) before the rows automatically moveint (in ms)2500
      directiondefines the direction of the rows movementup or down‘up’
      autostartenable/disable auto start on load0 or 11
      pauseOnHoverenable/disable pause when mouse hovers the newsTicker element0 or 11
      nextButtonset the element triggering next action on clickJQuery elementnull
      prevButtonset the element triggering prev action on clickJQuery elementnull
      startButtonset the element triggering start action on clickJQuery elementnull
      stopButtonset the element triggering stop action on clickJQuery elementnull
      hasMovedcallback called at the end of every movement animationfunction
      movingUpcallback called before launching moving up actionfunction
      movingDowncallback called before launching moving down actionfunction
      startcallback called on start actionfunction
      stopcallback called on stop actionfunction
      pausecallback called on pause action (triggered on mouseOver if pauseOnHover=1)function
      unpausecalled on unpause action (triggered on mouseOut if pauseOnHover=1)function

      Methods

      After initializing a newsTicker instance, methods are called with .newsTicker('methodName', 'param1', 'param2', ... )

      Example :

      var nt = $('.newsticker').newsTicker();
      nt.newsTicker('stop');
      nt.newsTicker('updateOption','direction','down');
      var state = nt.newsTicker('getState');
      

      Methods list

      | Method | Parameter(s) | Action | | ----------- | -------------------- | ------------------------------------------------------------------ | | `start` | | starts moving newsTicker elements | | `stop` | | stops moving newsTicker elements | | `updateOption`|`optionName`, `value` | update an option (see **Options & Callbacks** for options list) | | `getState` | | returns current state : `0` = stopped, `1` = started, `2` = paused (and started) | | `pause` | | pauses newsTicker elements without stopping them - the newsTicker has to be started to be able to pause it (the `pause` method is called on `mouseOver` if `pauseOnHover` = 1)| | `unpause` | | unpauses newsTicker elements - the newsTicker has to be started & paused to be able to unpause it (the `unpause` method is called on `mouseOut` if `pauseOnHover` = 1)| | `moveDown` | | moves elements down | | `moveUp` | | moves elements up | | `moveNext` | | moves up or down according to the current `direction` option | | `movePrev` | | moves up or down according to the current `direction` option | | `move` | | equivalent to `moveNext`, but will not move if `paused` | | `add` | `content` | adds a ticker row |

      Bitdeli Badge

      目录
      本文目录
      目录