신기한 웹 세상

Category

JavaScript/jQuery

wow.js으로 동적인 재미난 애니메이션 만들기

동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다. CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 간단히 애니메이션에 대해서 알아보도록 하자. 애니메이션 속성 animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다. animation-direction: 애니메이션 종료되고 다시 처음부터 시작할지 역방향으로… Continue Reading →

[JavaScript] 이미지 랜덤으로 노출 시키기

새로고침할 때마다 이미지 바뀌는 것을 해보았다. background-image 스타일 이미지로 변경하기 var banner = new Array(); banner[banner.length] = ‘bg01.jpg’; banner[banner.length] = ‘bg02.jpg’; banner[banner.length] = ‘bg03.jpg’; var obj = document.getElementById(‘backGround’); var size = Math.floor(Math.random()*(mainBg.length)); j = (isNaN(size)) ? 0 : size; obj.style.backgroundImage… Continue Reading →

탭 메뉴와 bxSlider 같이 사용하기

탭 메뉴속에 bxSlider를 넣을경우 첫번째 화면은 잘 나오는데 두번째 탭부터 제대로 나오질 않는 이슈가 발생했었다. 아무래도 ‘display’: ‘none’으로 되어 있어서 bxSlider가 인지를 못하는 것 같다. 삽질을 하다가 구글링은 역시 없는 것이 없다! 구글링에서 검색한 내용을 넣어보니 적용이 잘 되었다. 탭… Continue Reading →

[jQuery]enterKey 막기

$(document).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ return false; } });

[jQuery] 부드럽게 화면 이동하기

클릭을 했을 경우 href="#아이디값"으로 끊겨서 이동하는 것이 아니라 jQuery의 .animate()를 이용해서 화면이 부드럽게 이동되게 할 수 있다. 또 아이디 값이 없고 #만 있을 경우는 맨 위로 이동 시키게 할 수 있는데 참고 소스는 아래와 같다. 부드럽게 스크롤링의 접근성 원활한 스크롤링을… Continue Reading →

javascript DOM 트리 활용하기

Dom 트리에 접근하고 수정하는 작업은 크게 두 단계로 나뉜다.
1. 작업을 수행 할 대상 요소를 표현하는 노드를 찾는다.
2. 해당 노드의 텍스트나 자식 요소, 특성 등을 조작한다.

jQuery.holdReady()

$ .holdReady () 메소드는 jQuery의 ready 이벤트를 지연 호출 할 수 있다. 이 고급 기능은 일반적으로 DOM을 준비 할 수 있다하더라도, 준비 이벤트가 발생하도록 허용하기 전에 이러한 jQuery를 플러그인으로 추가 자바 스크립트를로드 할 동적 스크립트 로더에 의해 사용된다. 이 방법은… Continue Reading →

jQuery의 .animate()에서 .stop()의 중요성

jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로… Continue Reading →

[jQuery] 이미지 변경 replace 사용!

마우스가 접근했을 때 다른 이미지로 교체하는 방법 Class를 이용하는 방법 img태그에 class를 기입한다. <img src=”img_off.png” class=”rollover” /> jQuery로 변경을 한다. $(“.rollover”).on(‘mouseenter’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_off”,”_on”)); }).on(‘mouseleave’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_on”, “_off”)); }); .index()를 이용하는 방법 리스트내에서 순서를 부여해 해다하는 객체만… Continue Reading →

JavaScript String객체의 메소드

메소드 기능 charAt(index) index위칭의문자를알아냄 concat(문자열) 두문자열을하나의문자열로만듬 indexOf(문자열) 왼쪽부터문자를검색후지정된위치의문자를알아냄 lastIndexOf() 오른쪽부터문자를검색후지정된위치의문자를알아냄 slice() 문자열의일부분을추출해냄 split() 문자열을분리시킴 substr() 문자열을추출해냄 subString() 문문자열을추출해냄 toLowerCase() 문자열을소문자로만듬 toUpperCase() 문자열을대문자로만듬

javascript 눈 내리게 하기 소스

<script type=”text/javascript”> //////////////////////////////////////////////// // Javascript made by http://peters1.dk/tools // //////////////////////////////////////////////// // REMEMBER: To change the path, where snow.gif is saved… snow_img = “http://www.domain.com/snow.gif”; // EXTRA: You can adjust the numbers of snowflakes you want on each page… snow_no = 15;… Continue Reading →

알아두고 공부해야할 JavaScript 프레임워크들

JavsScript 프레임 워크들이 많아서 공부 할 것들이 너무 많다. 그래서 많이 쓰이면서 공부해야할 것들을 정리를 해보았다. 다른 곳에서 정리 한것을 재정리를 한 것이다. Angular.js http://angularjs.org Underscore.js http://underscorejs.org D3.js http://d3js.org Node.js http://nodejs.org two.js http://jonobr1.github.io/two.js Zebra https://github.com/barmalei/zebra Formula.js Chart.js http://www.chartjs.org Parallel.js http://adambom.github.io/parallel.js… Continue Reading →

JavaScript 객체

객체 생성

JavaScript 배열

배열 Array 배열 내부에 있는 값 하나하나를 요소(element)라고 부른다. 반면 객체 내부에 있는 하나하나의 값은 속성(property)이라고 부른다. 배열생성

JavaScript nested 함수

URL 인코드/디코드 인코딩은 문자롬 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법업니다. 웹상에서는 통신할 때

JavaScript 함수

함수에서는 선언적 함수와 익명 함수가 있다. 선언적 함수 선억적 함수는 fucntion 함수명 () { } 이렇게 생성된 것을 선언적 함수라고 한다. 익명함수는 var 함수명 = function() { }; 이 형태는 함수이지만 이름을 가지고 있지 않으므로 익명함수라고 한다.

JavaScript 반복문

2017.08.27 소스코드 하이라이트가 깨져서 수정하였습니다. for문 JavaScript: //초기식 조건식 증감식 for(var i=0;i<5;i++){ document.write(i + '번째 반복문<br>'); } document.write('===========================<br>'); //반복문을 1~100까지의 합을 구하기 var total = 0; for(var i=1;i<=100;i++){ //단일 for문 total += i; //total = total + i } document.write('total… Continue Reading →

JavaScript switch문

Switch문 document.write(”); 이것을 써서 바로 출력을 할 수는 방법이 있지만 <button> 을 사용하지 않을경우 페이지가 로딩되면 바로 경고창, 확인창, 입력창이 뜰 수 있기 때문에 <button> 을 만들었다.


© 2017 신기한 웹 세상

Up ↑