본문 바로가기

멀티캠퍼스 풀스택 과정/프론트엔드53

프론트엔드6-1. [jquery 예제] 영화포스터 움직이는 바 만들기-2 2022.02.11 - [멀티캠퍼스 풀스택 과정/프론트엔드] - 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 웹 창을 열면 바로 움직이다가 끝까지 가면 다시 또 반대쪽으로 움직이고 마우스를 올리면 멈춘다. 구조 구분하기 구조: 전체를 싸고 있는 빨간색 div / 왼쪽 버튼 ◁ 과 오른쪽 버튼 ▷ / 그림 를 everysmallstep.tistory.com -> 라이브러리 없이 만든 영화포스터 움직이게 하는 것을 jquery를 사용해 좀 더 간단하게 나타낼 수 있다. 1. HTML 구조 2. js 파일 1. 이미지를 먼저 imgList에 넣기 $(()=>{ // 포스트 이미지 목록 만들기 let tag=""; f.. 2022. 2. 17.
프론트엔드5-10. jquery animate( ) .animate( )는 여러 CSS 스타일 속성을 이용해 새로운 이펙트 효과를 만들어준다. [animate의 속성] properties 이펙트 효과를 구성할 CSS 스타일 속성 duration (default:400) 이펙트 효과가 지속될 시간 easing function (default:swing) 이펙트 효과의 시간당 속도를 전달 callback함수 이펙트 효과의 동작이 완료된 후에 실행할 함수 정의 1. HTML 파일 ANIMATE 2.-1 js파일 .animate( {옵션}, 이동시간 ) 첫번째 매개변수로 json형식으로 된 옵션, 두 번째 매개변수로 이동시간(slow, fast, ms..) $(()=>{ $("#i1").animate({marginLeft:"1000px" //(1) ,width:.. 2022. 2. 17.
프론트엔드5-9. jquery의 effect(숨김,표시)slide, fade 1. HTML파일 숨기기(hidden) 보여주기(show) toggle(hidden,show) 숨기기(fadeOut) 보여주기(fadeIn) fadeToggle(fadeOut,fadeIn) 숨기기(slideUp) 보여주기(slideDown) slideToggle(slideUp,slideDown) 1. 요소의 숨김과 표시 : hide( ), show( ), toggle( ) .hide( ) 선택한 요소를 사라지게 한다. .show( ) 선택한 요소를 나타나게 한다. .toggle( ) 선택한 요소에 .show( ) 메서드와 .hide( ) 메서드를 번갈아가며 적용한다. 1-1. 효과 속도 설정 : "slow", "fast", "normal" "밀리초(ms)" 이미지가 사라지는 시간을 매개변수로 받는다. 모.. 2022. 2. 16.
프론트엔드5-8. jquery trigger() trigger( ): 이벤트 핸들러 없이도 함수를 실행시켜준다. 1. HTML 파일 2. js파일 $(()=>{ // 수동으로 첫 번째 이미지를 클릭 시 클릭이벤트를 처리할 부분 let n = 1; $("img:first").on("click", function(){ // 첫 번째 이미지를 클릭했을 때 실행할 함수 $("body").append(""); if(n>=4){ // 이미지가 4개여서 4까지만 돌고 다시 이미지 1번으로 n=1; } }); }); 더보기 더보기 맨처음 이미지를 클릭할 때 마다 이미지가 생긴다. $(()=>{ // 자동으로 첫 번째 이미지를 클릭이벤트 발생시키기(1초마다) setInterval(function(){ // 함수를 바로 setInterval 안에 만들기 $("img").. 2022. 2. 16.
프론트엔드5-7. jquery 이벤트 처리하기(onxx)와 hover [이벤트 종류]: 더 많지만 생략,,, onclick, onmouseover, onmouseenter, onmouseout, onmouseleave onchange, onload, onresize, onfocus, onsubmit, onscroll onkeyup, onkeydown, onkeypressm onkeyrelease ondblclick, onreset, onblur, hover 1. HTML 파일 jQuery 이벤트 처리 jQuery 이벤트 처리 jQuery 이벤트 처리 jQuery 이벤트 처리 1.-1 이벤트 처리방법: 선택자와 이벤트 종류(on xx), 이벤트 발생시 실행할 함수 1. 사용자가 h1 태그를 아무거나 한 개만 클릭해도 글자색상이 파란색으로 변한다. 2. h1 태그를 아무거나 .. 2022. 2. 16.
프론트엔드5-6. jquery 요소의 조작(수치 함수 메서드) 1. HTML 파일 수치 조작 메서드 1234567 2. js파일 $(()=>{ $("div:eq(2)").append("수치함수"); }); 3. 폭과 높이를 구하는 함수 1. width( ): 폭을 구하는 함수 / height( ): 높이를 구하는 함수 $(()=>{ let width = $("div").eq(1).width(); let height = $("div:eq(1)").height(); $("div:eq(1)").append("width="+width+", height="+height+""); }); 2. innerWidth(), innerHeight() outerWidth(), outerHeigth() innerWidth(), innerHeight() -> padding을 포함한 폭과 높.. 2022. 2. 16.

티스토리툴바