[jQuery] scrollTop animation

요즘 사이트를 보면 상단으로 버튼이 있는 경우가 있다. 그 때 적용할 수 있는 간단한 jQuery 애니메이션 코드이다. <script> $(function() { $(“#top_button”).on(“click”, function() { $(“html, body”).animate({scrollTop:0}, ‘500’); return false; }); }); </script> 이 간단한 코드가 조금 전까지는 생각조차 안났다는 게 너무 신기하다. 금요일이라 정신이 잠시 외출한 게 아닐까 싶긴한데.. ㅎㅎ

Read More

[jQuery] 위에서 순차적으로 내려오는 이미지

위 이미지와 같이 위에서 순차적으로 내려오는 이미지를 구현하기 위한 코드이다. 개발 중인 쇼핑몰 솔루션에 적용예정인데 이런 기능을 하는 jQuery 플러그인 등이 있지만 간단하게 jQuery의 each(), animate(), delay() 를 사용하면 구현할 수 있다. 약간의 css 까지 더해지면 더할나위 없을지도 모른다. 아래는 간단한 문서구조이다. <ul> <li class=”first”> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> <li> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> </ul> […]

Read More

[jQuery] 간단한 이미지 슬라이더

뭐 대단한 것은 아니다. 여러 장의 이미지를 이전, 다음 버튼을 클랙할 때마다 좌, 우로 슬라이딩 되면서 보여주는 게 전부이다. 이런 간단한 것을 간만에 했더니 좀 시간이 걸렸는데.. 자주 쓰던 것들도 한동안 안쓰니 머리 속에서 시원스레 지워지나 보다. ㅋ 먼저 jQuery 코드이다. <script> $(function() { var time = 500; var idx = idx2 = 0; var […]

Read More

[jQuery] 순차적으로 내려오는 라인 서브메뉴

정확하게 제목을 쓴 것인지 모르겠는데.. 아래 그림을 보면 이해가 쉽지 않을까 싶다. 간단하게 테스트해보려고 만든 것인데 1번 메뉴가 보인 후 2번.. 이런 식으로 5번까지 메뉴가 순차적으로 위에서 아래로 내려오면서 보이게 되는 것을 구현하고 싶었다. 구글링을 통해서 간단한 소스를 찾기도 했는데 IE8에서 이상하게 작동을 해서 이 부분을 수정할 수 없을까 고민하다가 내 식대로 그냥 하나 코드를 […]

Read More

요일별 방문자수 구하기

작업 중인 쇼핑몰 통계부분에서 요일별 방문자수를 구해야할 일이 생겼다. MySQL에 DATE_FORMAT 을 이용하면 나름 쉽게 처리할 수 있을 것 같아 간단하게 코드를 작성해봤다. 생각대로 원하는 결과가 나와서 아주 만족했다는.. 위 이미지처럼 그래프까지 표시를 해야하는데.. 이렇게 표시하는 건 어려운게 아닌데 그래프가 위로 솟아오르는 것과 같은 애니메이션을 요구해서 결국은 jQuery의 animate() 까지 이용을 하게 됐다. 기본 작동원리는 […]

Read More