jrolling 은 jQuery 로 개발된 rolling 플러그인 입니다. 특정 영역을 왼쪽, 오른쪽, 위, 아래로 흐르게 합니다.
이전에 개발된 https://github.com/syakuis/jquery-slider-rolling
을 개선한 플러그인입니다.
Github: https://github.com/syakuis/jrolling
데모: http://syakuis.github.io/demo/jrolling/demo.html
자동 롤링
왼쪽 오른쪽 위 아래 롤링
마우스 오버시 작동 멈춤
버튼을 이용한 이전, 다음 롤링
자동 흐림 시작 및 멈춤
'items': null, // 대상
'width': null, // 대상 width
'height': null, // 대상 height
'frame': 500, // 흐르는 속도
'delay': 2000, // 초 후에 흐름
'move': 'left', // 흐름 방향
'auto': true, // 자동 흐름 설정
'prev': null, // 이전 클릭 이벤트
'next': null, // 다음 클릭 이벤트
'play': null, // 실행 클릭 이벤트
'stop': null // 종료 클릭 이벤트
bower install jrolling
<script src="./jquery.syaku.rolling.js" /></script>
var jrolling = $('#jrolling').jrolling({
'items': '#jrolling ul',
'width': '220px',
'height': '84px',
'move': 'up',
'auto': false,
'prev': '#prev',
'next': '#next'
});
jrolling.target.on('motionAfter', function(event, index) {
$('#jrolling_text').text(index);
});
motionBefore : 이동 전
motionAfter : 이동 후
jrolling.target.on('motionBefore' function(event, index) {
... todo
});