반응형 참고/Jquery26 jquery - DOM) HTML 과 TEXT *HTML this is paragraph this is paragraph set text set html p태그 내용에 볼드를 걸어서 글씨를 두껍게 만듬 버튼을 2개 만든다. *JQUERY $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "old text: " +origText+ "new text:hello world"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "old text: " +origText+ "new text:hello world"; }); }.. 2020. 6. 9. 복습 - click, dblclick, mouseenter, hover - HTML - this is a heading this is a paragraph this is a another paragraph hide - JQUERY - [1] $(document).ready(function () { $("button").click(function () { $("p").hide(); }); }); ======================================= [2] $(document).ready(function () { $("p").dblclick(function () { $(this).hide(); }); }); ======================================= [3] $(document).ready(function () { $("#p1").m.. 2020. 6. 3. jquery - 이미지 자동 슬라이드 - HTML - CSS img {width:500px; height:500px;} #imgslide { margin-top: 10px;} .imgs { position: relative; overflow: hidden; height:500px; background-color: #000; } .imgs>img { width:20%; position: absolute; transition: all 1s; } - JQUERY var imgs = 3; var now = 0; function slide() { now = now == imgs ? 0 : now += 1; $(".imgs>img").eq(now - 1).css({"margin-left": "-500px"}); $(".imgs>img").eq(now).. 2020. 5. 28. jquery - 메뉴 슬라이드 (stop 미사용 / stop 사용) - HTML 학교 소개 매뉴 메뉴1-1 메뉴1-2 메뉴1-3 메뉴1-4 메뉴1-5 메뉴1-6 시설 소개 매뉴 메뉴2-1 메뉴2-2 메뉴2-3 메뉴2-4 메뉴2-5 메뉴2-6 *stop미사용 $(function(){ $(".menu>li").mouseover(function(){ $(this).children().slideDown(); }); ------------------------------------------------ $(".menu>li").mouseleave(function(){ $(this).children().slideUp(); }); }); ================================================ 설명 마우스를 여러번 올리고 내리면 그 애니메이션이 마우스가.. 2020. 5. 28. 이전 1 2 3 4 ··· 7 다음 반응형
