1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(document).ready(function(){ /** * 백그라운드 이미지의 애니메이션 화 * * - SECTION: 반복되는 이미지 구간 넓이 * - WIDTH: 이미지 전체 넓이 * - TIME: 애니메이션 속도 * */ // 생성 $.fn.aniJin = function (SECTION, WIDTH, TIME){ var $this = $(this); // 대상 설정 if(!TIME) {TIME = 200;} // default 값 설정 var repeat = setInterval(function(){ var bpx = parseInt($this.css("backgroundPositionX")); // 백그라운드의 현재 위치값 $this.css({ backgroundPositionX: "-=" + SECTION }); // 반복되는 구간 만큼 백그라운드 이동 if (bpx <= -(WIDTH-SECTION*2)) { clearInterval(repeat); } // 종료시점 설정 }, TIME); }; // EX $(".blossom2").aniJin(550, 8800, 200); $(".blossom3").aniJin(630, 13860, 180); $(".blossom4").aniJin(480, 8640, 200); }); | cs |
'Front > JavaScript' 카테고리의 다른 글
스크롤 이동 (0) | 2016.10.11 |
---|---|
테이블 서머리, 캡션 삽입 스크립트 (0) | 2016.09.22 |
메뉴 고정 (0) | 2016.08.04 |
일정한 개수로 그룹화(묶기) (0) | 2016.08.02 |
테이블 헤드 고정 (0) | 2016.07.28 |
댓글 로드 중…
트랙백을 확인할 수 있습니다
URL을 배껴둬서 트랙백을 보낼 수 있습니다