본문 바로가기

제이쿼리4

[사이트 추천] 라이트 갤러리 (포트폴리오 작성 시 사용하면 좋은 제이쿼리) 다음 라이트 갤러리는 자신의 포트폴리오를 보여주기에 적합한 제이쿼리 입니다. https://sachinchoolur.github.io/lightGallery/demos/ lightGallery: thumbnails Plugin dependency Lightgallery require the thumbnail plugin to be included in your document. sachinchoolur.github.io 2019. 12. 29.
레이어 팝업과 윈도우 팝업 만드는 html과 css 그리고 스크립트 레이어 팝업과 윈도우 팝업을 만들어 봅니다. html 닫기 CSS /* 레이어 팝업 */ #layer {display: none; position: fixed; left: 50px; top: 50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);} #layer img {width: 100%; display: block;} #layer .close {position: absolute; right: 20px; top: 20px; background: #0093bd; padding: 1px 6px; color: #fff;} #layer .close:hover {text-decoration: underlin.. 2019. 12. 27.
[사이트 추천] 제이쿼리로 배너를 만들고 싶을 땐? Slick! 슬릭(slick)이라는 사이트를 이용하여 손 쉽게 배너를 만들 수 있습니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 위의 사이트로 들어갑니다. get it now 버튼을 클릭하여 css파일과 js 파일을 다운로드 합니다. 이를 html 파일에 연동 시킨 후 slick 에서 요구하는 방식대로 Markup을 진행합니다. 그리고 스크립트를.. 2019. 12. 25.
특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 다음의 코드는 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 입니다. //버튼을 클릭하면 전체 메뉴를 보이게 하세요. $(".tit .btn").click(function(e){ e.preventDefault(); //$("#cont_nav").css("display","block") //$("#cont_nav").show(); //$("#cont_nav").fadeIn(); //$("#cont_nav").slideDown(); //$("#cont_nav").toggle(); //$("#cont_nav").fadeToggle(); //$("#cont_nav").slideToggle(300); //$(this).toggleClass("on"); }); 2019. 12. 24.