jQuery
【jQuery】方向を変えることができるjQueryマーキーエフェクトMarquee Direction
May 5, 2017

Marquee Directionは方向を変えることができるjQueryマーキーエフェクト。
vertical
か horizontal
html markup
<div class="marquee marquee-vertical" data-speed="100" data-direction="vertical"> <div class="marquee-wrapper"> <div class="marquee-content"> Some long text... </div> </div> </div> <div class="marquee marquee-horizontal " data-speed="50" data-direction="horizontal"> <div class="marquee-wrapper"> <div class="marquee-content"> Some long text here... </div> </div> </div>
css
.marquee-vertical { height: 200px; overflow: auto; } .marquee-content { margin: 0; padding: 30px; } .marquee { overflow: auto; padding: 0; margin: 15px 0; } .marquee-horizontal { white-space: nowrap; } .marquee-horizontal .marquee-content, .marquee-horizontal .marquee-wrapper { display: inline-block; }
js
$(".marquee").marquee(); //initialization $(".marquee").marquee({ speed: 100, direction: horizontal }); //initialization with custom speed and direction $(".marquee").trigger("forward"); // triggers forward event $(".marquee").eq(0).trigger("forward", {speed: 50}); // Custom speed $(".marquee").trigger("revalidate"); //E.g. if on window.resize text doesn't overflow you might want to disable marquee