强大的jQuery跑马灯插件 A jQuery web ticker

Examples

Below are examples of different methods that can be used with the web ticker.

Example 1: Updating the Ticker Content

HTML

The Markup Used for Initializing the Web Ticker

<ul id="webticker-update-example" >
    <li data-update="item1">WebTicker v3.0.0 has just been released! Read the new documentation.</li>   
    <li data-update="item2">WebTicker v3.0.0 now has commercial licenses available. Check which license is applicable for you.</li>
</ul>

Starting the Web Ticker

The first ticker is running the default options with an exception to the height, which is being set to 75px.

$("#webticker-update-example").webTicker({
    height:'75px'
});

Updating the Data

The update method is called using the below trigger.

$("#update-newsticker1").click(function(){
    $("#webticker-update-example").webTicker('update',
        '<li data-update="item1">Web Ticker v3.0.0 has just been released! And the documentation has become even better!</li> 
         <li data-update="item2">The Web Ticker v3.0.0 commercial license no longer binds you to make your projects open source.</li> 
         <li data-update="item3">An OEM License is also available if your would like to make the WebTicker part of your website builder</li>
         <li data-update="item4">Maze Digital will now be commercially supporting the Web Ticker</li>',
        'swap',
        true,
        false
    );
});

Example 2: Stop/Continue Ticker Scrolling

Settings Used

The second ticker is using some of the available options; such as having hover-pause disabled, transition set to ‘ease’ and ‘duplicate’ set to true.

$("#webticker-stop-continue-example").webTicker({
    height:'75px', 
    duplicate:true, 
    rssfrequency:0, 
    startEmpty:false, 
    hoverpause:false, 
    transition: "ease"
}); 

Methods Used

The stop method is called using:

$("#stop-newsticker2").click(function(){
    $("#webticker-stop-continue-example").webTicker('stop');
});

The continue method is called using:

$("#continue-newsticker2").click(function(){
    $("#webticker-stop-continue-example").webTicker('cont');
});

Example 3: Transition Easing

Methods Used

The ease transition method is called using:

    
$("#ease-financeticker").click(function(){
     $("#webticker-transition-ease").webTicker('transition', 'ease');
});

The linear transition method is called using:

    
$("#linear-financeticker").click(function(){
    $("#webticker-transition-ease").webTicker('transition', 'linear');
});

Example 4: Right-to-left

HTML

<ul id="right-to-left-webticker" dir="ltr">
    <li data-update="item1"> وقد تم الافراج عن عادل WebTicker 3.0.0! الرخص التجارية المتاحة.</li>   
    <li data-update="item2"> WebTicker 3.0.0 עתה שוחרר! רישיונות מסחריים זמינים.</li>
</ul>

Settings Used

The ticker can be set to scroll from left to right using the following initializing settings.

$("#right-to-left-webticker").webTicker({
    height:'75px', 
    direction: 'right'
});

Example 5: Images

HTML

The fifth ticker includes images instead of plain text.

<div class="ticker-wrapper">
    <ul id="images-webticker">
        <li>
            <img style='width:200px; height: 150px;' src="img/MER_800_600.jpg"/>
        </li>
    </ul>
</div>

Example 6: RSS

Rss Feeds are automatically supported by the ticker; note that as per javascript cross-domain restrictions you can only load RSS feeds from your own website.

$("#webticker").webTicker({
    rssurl:'http://maze.digital/rss/', 
    rssfrequency:5
});