일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 홈페이지
- #홈페이지제작
- #jQuery
- 솔루션
- #cgimall
- #happycgi
- #홈페이지
- #image
- javascript
- #CSS
- 홈페이지제작
- php
- CSS
- #쇼핑몰
- CGIMALL
- #업종별
- #솔루션
- 게시판
- #이미지
- 해피CGI
- 쇼핑몰
- 해피씨지아이
- jquery
- 웹솔루션
- #해피CGI
- #동영상
- #웹솔루션
- #뉴스
- happycgi
- 사이트제작
- Today
- Total
목록웹프로그램밍 자료실/JAVA 자료 (765)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
버튼 클릭시 진행중 완료 상태 해당 사이트에서 소스 전체를 확인할 수 있습니다.
다운로드 받은 파일의 압축을 해제한 뒤, examples.html examplesAnimation.html examplesAppl.html examplesContentPlugins.html testSetupProgresspie.html 위 파일들을 웹브라우저로 열어보면 많은 케이스의 데모 및 각각 케이스의 사용법에 대한 확인이 가능합니다. 진행상황을 파이 형태로 화면에 표시해주는 jquery 플러그인입니다. 진행상황을 실시간으로 표시해주는 애니메이션 효과를 주는것도 가능합니다. 상당히 많은 케이스의 샘플들이 있습니다. 파이를 구성하는 요소들의 크기를 위 그림 처럼 설명을 해주고 있습니다. 원 내에 이미지를 보여주는 것도 가능합니다. 위 그림 처럼 각각의 케이스들 마다 페이지에 표시하기 위해서 사용된 태그..
데모를 확인하기 위해서는 PHP가 구동되는 웹서버가 필요합니다. 웹서버에 다운로드 받은 파일을 업로드 하고, 압축을 해제한뒤에, 웹브라우저로 접속가능한 도메인(localhost 또는 IP주소등) 으로 접속한 뒤에 editor.html URL로 접속하면 됩니다. 웹브라우저를 이용해서, 웹페이지에 표시되는 요소(이미지,텍스트,레이어 등등) 를 편집할수 있는 기능을 제공해줍니다. 가령 앨범 페이지를 편집하려고 했을 때 샘플로 만들어둔 페이지(틀) 의 이미지 요소를 변경하기 위해서, 위 그림 처럼 화면에 표시하는 이미지를 선택한 뒤에 이미지 파일을 선택하거나 , 직접 보유하고 있는 이미지 파일을 업로드 하면 화면에 표시되는 이미지를 보여주고자 하는 이미지로 변경하실 수 있겠습니다. 이미지를 변경하는 것 이외에도..
해당 사이트에 데모 애니메이션과 설치 방법에 대한 안내가 잘 되어있습니다. 각 js 와 css 를 include 한 후 a 링크에 클래스와 각 애니메이션와 시간을 마크업 합니다. 그런뒤 JS 로 실행해주면 되겠습니다. 페이지 전환 애니메이션이 필요한 간단한 사이트에 활용하면 좋을것 같습니다.
이렇게 생긴 selectbox 를 이렇게 예쁘게 만들 수 있습니다. 사용법도 해당 사이트에 안내가 잘 되어있습니다. 각 js 와 css 를 include 해주고 사용하시면 됩니다. 더 디테일한 커스텀도 가능합니다. 사용해 보시기 바랍니다.
범위를 선택하기 위한 슬라이더를 화면에 표시하는 jquery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 데모를 확인하는게 가능합니다. 사용방법은 아래와 같습니다. 페이지에서 범위 값을 선택하도록 하기 위한 인터페이스를 만들때 사용하면 괜찮을 것 같네요.
우측하단 좌우 화살표 버튼을 클릭하시면 좌측 문구와 우측 이미지가 에니메이션 슬라이드 효과와 함께 변경됩니다. 끝까지 이동시 다시 처음부터 반복합니다. 웹사이트 메인페이지에서 유용하게 사용이 가능해 보입니다. 자바스크립트 소스입니다. 이미지 에니메이션 효과 뿐만 아이라 좌측 문구 영역도 별개의 에니메이션 소스로 작동됩니다. css 를 수정하시면 쉽게 변경이 가능합니다. 첨부파일을 다운로드하시거나 해당 사이트에서 소스를 확인할 수 있습니다.
이미지 맵은 이미지 내의 개별 영역을 고유한 대상에 연결하여 작동합니다. 정적 그래픽 또는 사진에 상호 작용을 추가하기 위한 완벽한 솔루션입니다. 이미지 맵의 단점은 브라우저 창의 크기를 변경할 때 픽셀 좌표도최신 상태로 유지해야한다는 것입니다. 이것이 바로 rwdImageMaps.js 플러그인이 들어오는 곳입니다. rwdImageMaps.js는 모든 장치 및 브라우저에서 완벽하게 반응하는 이미지 맵을 만들기위한 경량 jQuery 플러그인입니다. 원본 이미지 크기와 현재 브라우저 창의 크기를 기반으로 이미지 맵의 좌표를 자동으로 다시 계산하고 업데이트합니다. 이미지를 클릭한 위치에 따라서, 위 그림과 같이 다른 경고창이 뜨도록 이미지맵을 지정할수 있습니다. 사용방법은 아래와 같습니다. 반응형 이미지가 되..
다운로드 받은 파일의 압축을 해제한 뒤, example/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 화면에 보라색으로 표시되는 동그라미가 표시가 되고, 보라색 버튼을 클릭하면 위 그림 처럼 클릭했던 동그라미 주변에 방사형으로 메뉴가 펼쳐지게 됩니다. 펼쳐진 메뉴에 버튼을 선택해서 클릭시에는 위 그림 처럼 어떤 메뉴를 클릭했는지를 경고창이 뜨네요. 사용방법은 아래와 같습니다.