시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > JQuery > Soccer Field Diagram With Players And Positions - jQuery soccerField.js 상세정보
사이트등록
클라우드태그
CSS
ASP
jquery
Javascript
PHP
무료폰트
게시판
메뉴
슬라이드
slide
쇼핑몰
달력
모바일
현재접속자 새로고침
Soccer Field Diagram With Players And Positions - jQuery soccerField.js
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기
소스분류 JQuery
다운로드 횟수 8 회
간단설명 축구장을 그린 그림 위에 각 포지션별로 선수를 표시해주고, 팀 구성을 설명하는데 사용되는 jQuery 플러그인입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기
다운로드 받은 파일의 압축을 해제한 후,
demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.





축구 필드를 먼저 화면에 표시해주고,


각각의 포지션에 맞는 위치에 사람 그림이 표시가 되고,
해당 포지션에 배치된 선수가 누구인지를 서서히 표시해줍니다.






소스코드를 열어보면

1. jquery.js 와 soccerfield.js 를 로드를 먼저 합니다.



2. 선수의 이름과 포지션에 해당하는 데이터를 준비합니다.




3. 배경이 되는 축구 필드를 표시하는 스크립트를 실행하고,
해당 필드의 크기, 배경용 이미지 외 몇가지 옵션을 조절해서 아래와 같은 코드들을 작성하면 됩니다.




필드에 대한 옵션과,
선수에 대한 옵션이 나누어져 있네요.

모든 선수들이 필드에 표시된 이후에 작동 되는 콜백함수도 만들수 있나 봅니다.



축구와 관련된 정보를 제공하는 사이트를 제작할 때 있으면 좋을듯 하네요


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 48647523 보이는 도배방지키를 입력하세요.