728x90 반응형 javascript/jQuery30 [jQuery] Scroll event 적용하기 스크롤할 때 영역 밖에 가려지는 컨텐츠 반투명하게 설정했다가 스크롤로 영역 안으로 들어왔을 때 다시 투명하지 않게 바꾸는 애니메이션 if(wheel>0){ //스크롤 올림(영역이 아래로 내려감) var max= $(".open").length; //현재 opacity:1 인 box 의 갯수를 가져온다 for(var i=0; i check+350 ){ // 윗부분이 영역 밖으로 넘어갔을때 다시 투명하게 설정 $(".open").eq(i).removeClass("open"); } } }else { //스크롤 내림(영역이 위로 올라옴) var max = $(".box").length; //전체 box 갯수를함 for(var i=0; i 2019. 5. 31. [JAVASCRIPT/JQUERY] touchstart/touchend를 이용해 모바일 터치로 스크롤 움직일때 이벤트 추가하기 처음 touchstart 터치를 시작한 시점의 x.y 좌표를 구하고 마지막 터치를 끝내는 지점 touchend 의 x.y를 구해서 어느 방향으로 터치했는지 알 수 있다. 아래결과는 모바일에서 확인가능하다!(또는 크롬 개발자도구이용) See the Pen 터치이벤트 by gahyun (@gahyun) on CodePen. 웹과 모바일 모두 동일하게 적용하기 위해서는 웹에서는 mousedown / mouseup 이벤트를 이용해 구현해 보았다 See the Pen 웹-모바일 모두 적용되는 스와이프 by gahyun (@gahyun) on CodePen. 2019. 4. 25. [JAVASCRIPT/JQUERY] 자바스크립트(&제이쿼리) 선택자 1. 클래스 선택자 document.getElementsByClassName("클래스명"); $(".클래스명"); //해당클래스명을 가진 전체 요소를 배열로 반환합니다. 배열로 반환되므로 document.getElementsByClassName("클래스명")[0] document.getElementsByClassName("클래스명")[3] 과 같이 특정요소 선택이 가능합니다. 제이쿼리에서는 $(".클래스명").eq(0) $(".클래스명").eq(3) 과 같이 사용 가능합니다. 2. 아이디 선택자 document.getElementById("아이디"); $("#아이디"); //해당 아이디를 가진 요소를 반환합니다.(아이디값은 html내에서 1개만 존재함 -중복허용 X) 3. 태그 선택자 document.g.. 2019. 4. 18. [JAVASCRIPT/JQUERY] 문자열(string)관련 함수 var 문자열1 = "hello" var 문자열2 = "world" concat : 문자열 이어 붙이기 문자열1을 문자열2와 이어붙이는데 그 사이에 !를 넣어 붙인다. 문자열1.concat("!", 문자열2); >> 결과 hello!world indexOf : 주어진값과 일치하는 첫번째 인덱스 일치값이 없으면 -1 문자열1.indexOf("l"); >> 결과 2 replace : 문자열 교체하기 var p = 'hello Test Code hello Wolrd'; var regex = /hello/gi; console.log(p.replace(regex, 'change')); //정규식을 이용할경우 전체 문자열을 교체한다. /* >>결과 : change Test Code change Wolrd */ co.. 2019. 4. 16. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형