jQuery

【jQuery】ホバーで一時停止する簡単なマーキーを実装。Simple Marquee

August 20, 2016
Simple-Marquee

Simple Marqueeはホバーで一時停止する簡単なマーキーを実装できるjQueryプラグイン。

Sample Usage

$('.simple-marquee-container').SimpleMarquee();

HTML

<div class="simple-marquee-container">
    <div class="marquee-sibling">
        I am here to iritate you
    </div>
    <div class="marquee">
        <ul class="marquee-content-items">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </div>
</div>

CSS

<link rel="stylesheet" href="css/marquee.css" />
//quirky stuff when the DOM for the 
//marquee-container is created dynamically
//after an AJAX call. If the window is focused
//it will not re-trigger the 'focus' upon
//AJAX completion. 
$(".marquee-1").trigger('mouseenter');
$(".marquee-1").trigger('mouseleave');

MITライセンス