阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.webticker 中文API文档

      插件 jQuery.webticker 中文API文档 https://github.com/mazedigital/Web-Ticker

      canonical: https://maze.digital/webticker/ license: https://maze.digital/webticker/license/ use-cases: https://maze.digital/webticker/use-cases/ examples: https://maze.digital/webticker/examples/ faq: https://maze.digital/webticker/faq/ change-log: https://maze.digital/webticker/change-log/

      #Web Ticker v3.0.0

      ##Web Ticker - what is it for?

      Web Ticker is a jQuery plugin that allows you to have items scrolling indefinitely across the screen. It uses some fancy calculations to ensure smooth continuous transitions. The Web Ticker content, can be varied, including text, image lists or even custom styled items. The Web Ticker API can also be used to control the scrolling, and content programatically.

      ##Install & Configure

      ###Installation

      All you should need to do is look at a few of our simple examples to get started. Continue reading for step by step instructions.

      1. Make sure that jQuery is available on your page, if you do not have jQuery you can include a Google hosted version by copying the code below:

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        
      2. Download the standalone jquery.webticker.min.js or install via npm

         npm install webticker
        

        and include it like this:

         <script src="./path/to/jquery.webticker.min.js"></script>
        
      3. Make sure you have a valid list(s) in HTML and that you can identify and select

         <ul id="webTicker">
             <li>This List Item will scroll infintely</li>
             <li>And this one will follow it</li>
             <li>Finally when it goes out of screen, it will queue again at the end</li>
         </ul>
        
      4. In your Javascript file, select with jQuery the list you want to convert to a ticker, and run the webTicker function.

         $('#webTicker').webTicker();
        

      WebTicker is now activated on the list with id ‘webTicker’.

      ###Settings {#settings}

      When initializing the web ticker you may pass parameters to modify the settings of the web ticker. This is completely optional and used to meet your specific needs.

      SettingDescriptionDefault
      speedThe movement speed in pixels per second50
      movingDefines if the WebTicker should start in moving state or a paused statetrue
      startEmptyDefines whether the elemtents should start outside of the visible areatrue
      duplicateIndicates that items should be duplicated if necessary to remove any white spacefalse
      hoverpausePauses the animation if the user hovers over the tickertrue
      rssurlThe URL of the RSS Feed (pay attention to cross domain restrictions)false
      rssfrequencyThe time (in minutes) it takes to refresh the RSS Feed. 0 means no update0
      updatetypeDefines if the data update will reset the ticker including only new items or update items inlinereset
      transitionThe easing function used throughout for transitionslinear
      heightThe height of the ticker element. The string value needs to include the unit‘30px’
      maskleftThe image to be used for overlay masking on the left side''
      maskrightThe image to be used for overlay masking on the right side''
      maskwidthDefines the width of the Mask (used for fade-in and fade-out)0

      ###Methods {#methods}

      Methods can be called using javaScript on the element of the web ticker. The below table illustrates the available methods.

      MethodDescriptionExample
      stopStops the elements of the ticker in the current positionStop Example
      contContinues scrolling the elements from the current position.Continue Example
      updateThe update functionality supports two modes ‘swap’ and ‘reset’ which are set accordingly when the ticker is started. The swap functionality uses data-update attributes to identify uniquie items in the list. When a node value is changed this is just ‘swapped’ leaving it in the same positions. Items not in the ‘update’ list are not removed whilst new ones would be added at the end. This behaviour can be altered by passing the last two parameters, insert & remove. A boolean value of true would indicate new items to be added/removed respectively. The default values for ‘insert’ is true whilst ‘remove’ is false.Update Example
      transitionDefines which of the transitions to use. The available transisions are ‘linear’, which scrolls at a normal and steady speed, and ‘ease’ which slows down as an item exits the edge of the ticker border.Transition Example

      ###Styling {#styling}

      Styling the WebTicker is pretty much up to you as a developer, however the WebTicker does alter the dom slightly, and

      ###Markup Explained {#markup-explained}

      The final mark up would look something like the below:

      <div class="tickercontainer">
          <div class="mask">
              <ul id="WebTicker">
                  <li class="ticker-spacer"></li>
                  <li>This List Item will scroll infintely</li>
                  <li>And this one will follow it</li>
                  <li class="last" >Finally when it goes out of screen, it will queue again at the end</li>
              </ul>
              <span class="tickeroverlay-left">&nbsp;</span>
              <span class="tickeroverlay-right">&nbsp;</span>
          </div>
      </div>
      

      Elements Explained:

      ClassDescription
      tickercontainerwraps the ticker, setting the height and width.
      maskprimarily used when masking/overlays are required, is another container wrapper
      ticker-spacerUsed when there is not sufficient space to fill the ticker with items (white space)
      tickeroverlay-lefta class which can be used to define an overlay on top of the webticker (used when defining a left overlay image)
      tickeroverlay-righta class which can be used to define an overlay on top of the webticker (used when defining a right overlay image)
      lastused when adding new items, as a refernece to the last initialized item
      目录
      目录