0621 금 uiux 56일차
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> .a { width: 100px; height: 100px; border: 1px solid #000; transition: all .3s; } </style> </head> <body> <div class="a" id="a1"></div> <div class="a" id="a2"></div> <div class="a" id="a3"></div> <script> $(".a").mouseover( function() { $(".a").css({ "width": "200px", }); } ).mouseout( function(){ $(".a").css({ "width": "100px", }); } ) </script> </body> </html> 제이쿼리로 'hover하면 늘어나는 박스' 만들기 |
for(let i = 1; t<= $(".a").length; i++){
$("#a"+i).mouseover(function(){
$("#a"+i).css({"transition": "all .3s", "width": "200px";})
}).mouseout(function(){
$("#a"+i).css({"transition": "all .3s", "width": "100px";})
});
}
머가 안됏지
.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.a {
width: 100px;
height: 100px;
border: 1px solid #000;
transition: all .3s;
}
.b {
width: 100px;
height: 30px;
background-color: skyblue;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="a" id="a1"></div>
<div class="a" id="a2"></div>
<div class="a" id="a3"></div>
<div class="b" id="b1"></div>
<div class="b" id="b2"></div>
<div class="b" id="b3"></div>
<div class="b" id="b4"></div>
<script>
function abc(f1, f2, f3, f4) {
for (let i = 1; i <= $(f1).length; i++) {
$(f2 + i).mouseover(function () {
$(f2 + i).css({ "transition": "all .2s", "width": f4; })
}).mouseout(function () {
$(f2 + i).css({ "transition": "all .1s", "width": f3; })
});
}
}
abc(".a", "#a", "100px", "300px");
abc(".b", "#b", "50px", "400px");
</script>
</body>
얜또왜안됨?
function abc(f1, f2, f3, f4) {
for (let i = 1; i <= $(f1).length; i++){
$(f2 + i).mouseover(function() {
$(f2 + i).css({ "transition": "all .2s", "width": f4; })
}).mouseout(function () {
$(f2 + i).css({ "transition": "all .1s", "width": f3; })
});
}
}
abc(".a", "#a", "100px", "300px");
abc(".b", "#b", "50px", "400px");
얜또왜??
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.a {
width: 100px;
height: 100px;
border: 1px solid #000;
transition: all .3s;
}
.b {
width: 100px;
height: 30px;
background-color: skyblue;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="a" id="a1"></div>
<div class="a" id="a2"></div>
<div class="a" id="a3"></div>
<script>
let i = 0;
function ae(ix) {
$(".a").eq(ix).css({ "width": "200px" });
setTimeout(
function () {
$(".a").eq(ix).css({ "width": "100px" });
}
, 2000);
}
setInterval(
function () {
ae(i);
i++;
if (i == $(".a").length) {
i = 0;
}
}
, 4000);
</script>
</body>
웹(혜지쌤)
체크박스 만들기 ( https://codepen.io/YoungHeom/pen/rNgdwxK )
.
.
.
'UIUX(03.28~10.02)' 카테고리의 다른 글
| 0625 화 uiux 58일차 (0) | 2024.06.25 |
|---|---|
| 0624 월 uiux 57일차 (0) | 2024.06.20 |
| 0620 목 uiux 55일차 (0) | 2024.06.20 |
| 0619 수 uiux 54일차 (0) | 2024.06.19 |
| 0618 화 uiux 53일차 (0) | 2024.06.18 |