웹퍼블/웹 기능만들기
숫자 애니메이션으로 표시하기
숫자 애니메이션으로 표시하는 예제입니다. $(function(){ var data1 = 0, data2 = 0, data3 = 0, numberResult = $('.numberResult'), numberInput = $('.numberInput'), numberButton = $('.numberButton'); //버튼 클릭시 numberButton.click(function(e){ e.preventDefault(); data1 = Number(data3); data2 = Number(numberInput.val()); data3 = Number(data1) + Number(data2); //animate옵션을 활용 사용자 속성을 만들고, 속성이 바뀌는 것을 작성 $({data:data1}).anim..
페이지 맨 위로 이동하기
위로가기 버튼을 클릭하였을때 스크롤이 맨위로 올라기는 기능입니다. 버튼(class=".up")을 클릭하면 e.preventDefault()로 링크 이동을 막고, scrollTop을 이용하여 값을 0으로 이동합니다. (scrollTop는 세로 스크롤바를 의미합니다.) 현재 스크롤 위치는 $("html,body").scrollTop();를 이용해 알 수 있습니다.. $(function(){ $('.up').on('click',function(e){ e.preventDefault(); $('html,body').animate({scrollTop:0},1000); }); }); 개인 공부용으로 만들었습니다. 다른 분들에게도 도움이 되었으면 좋겠습니다. 틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
a 태그 링크 막는 방법(e.preventDefault())
a태그 링크 막는 방법입니다. e.preventDefault(); 를 사용하면 됩니다. $(function(){ $('h1 > a').on("click",function(e){ e.preventDefault(); }); }); 개인 공부용으로 만들었습니다. 다른 분들에게도 도움이 되었으면 좋겠습니다. 틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.
원하는 위치에서 이미지 나타나게 만들기
원하는 위치에서 이미지를 나타나게 만들기 입니다. $(window).scrollTop()의 높이가 원하는 값이 되면 addClass()을 이용하여 나타나게 한다. $(function(){ //페이지문서 로드 완료 후 바로 실행; $("#wrap1>.img").addClass("action"); //scroll할때 scroll함수 실행; $(window).on("scroll",scroll); function scroll(){ //스크롤한 높이 값 scrollTop = $(window).scrollTop(); console.log(scrollTop); //스크롤한 높이 값이 600보다 클때 addClass실행 if (scrollTop >= 600){ $("#wrap2 > .img").addClass("act..