JQuery
-
211007_JQuery 2021. 10. 8. 11:21
css @charset "UTF-8"; body{ margin: 0; padding: 0; } li{ list-style: none; } body.html{ height: 100%; overflow: hidden; /* 스크롤바 숨기기 */ } body{ background: #fff1cb url("../image/bg.png") center center; background-size: cover; } #sunban-wrapper{ width: 800px; margin: 50px auto; } #control-wrapper{ width: 300px; height: 420px; position: fixed; left: 0; bottom: 0; } .sunban{ height: 150px; margin-bo..
-
211007_table,click,addClass,removeClassJQuery 2021. 10. 8. 10:25
DOCTYPE html> Insert title here table { border-collapse: collapse; } td { border: 1px solid gray; } .small img{ width: 80px; height: 100px; } .large{ width: 280px; height: 330px; } p { font-weight: bold; } .select{ background-color: #ffffe0; color: gray; font-size: 1.2em; } $(function () { $("a.small").click(function(e) { //기본이벤트(링크되는거)를 무효화 e.preventDefault(); //td에 select클래스를 추가 $(this).parent..
-
211007_animate,z-indexJQuery 2021. 10. 8. 10:08
DOCTYPE html> Insert title here div.wall { position: absolute; width: 200px; height: 500px; background-image: url("../image/bg2.png"); z-index: 2; } #img1{ position: absolute; left: 140px; top: 100px; width: 150px; height: 200px; z-index: 1; } $(function () { $("#img1").click(function() { //3번째 함수는 너비가 0되면 호출되는 함수 $(this).animate({width: "0px"},'slow',function(){ $(this).animate({width: "150px"}..
-
211007_animate,active,imageJQuery 2021. 10. 8. 09:50
DOCTYPE html> Insert title here /* gun.png의 사이즈 300*500 */ #gun{ width: 300px; height: 250px; background-image: url("../image/gun.png"); } #gun:active { background-position: right bottom; /* 100% 100%와 같음 */ } div.cover{ position: absolute; left: 100px; top: 350px; background-image: url("../image/cover.png"); width: 350px; height: 300px; background-size: 350px 300px; z-index: 2; } div.cd1{ posit..
-
211007_div,z-indexJQuery 2021. 10. 7. 10:35
DOCTYPE html> Insert title here h3 { width: 400px; height: 40px; border: 1px solid #000; line-height: 40px; border-radius: 20px; padding-left: 20px; text-shadow: 10px 10px 20px yellow; cursor: pointer; } h3:active { border: 5px solid gray; } div { position: absolute; border: 2px solid gray; width: 300px; height: 300px; border-radius: 200px; } div.pink { left: 200px; top: 200px; background-color:..