jQuery practice // 0510

<head>
<meta charset=”utf-8″>
<title>가상요소의 활용</title>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>

<script type=”text/javascript”>
$(  function()  {

$(“p:nth-child(2)”).click(function() {$(“p:nth-child(2)”).animate({marginTop:”100px”},”slow”);
$(“p:nth-child(3)”).animate({marginTop:”270px”},”slow”)
}
);
$(“p:nth-child(3)”).click(function() {$(“p:nth-child(2)”).animate({marginTop:”150px”},”slow”);
$(“p:nth-child(3)”).animate({marginTop:”320px”},”slow”);
$(“p:nth-child(4)”).animate({marginTop:”270px”},”slow”);
}
);
$(“p:nth-child(4)”).click(function() {$(“p:nth-child(2)”).animate({marginTop:”200px”},”slow”);
$(“p:nth-child(3)”).animate({marginTop:”370px”},”slow”);
$(“p:nth-child(4)”).animate({marginTop:”320px”},”slow”);
$(“p:nth-child(5)”).animate({marginTop:”220px”},”slow”);
}
)

}

)

<!– $(“p::before”).append(“채팅중”);  가상요소라 텍스트 안 먹는다 –>

</script>

<script>
alert( “새로 나온 대화창  클릭하면 아래로 내려 갑니다.”);
</script>

<style>

html {}
body {auto;text-align:center;}
#chat {margin:auto; width:300px; height:300px; border:4px solid black; position:relative;}
p:nth-child(2) {position:absolute;top: 28px ;left: -130px ; background:black; color:white;padding:10px; border-radius:10px}
p:nth-child(3) {position:absolute;top: -200px ;right: -30px ; background:black; color:white;padding:10px; border-radius:10px}
p:nth-child(4) {position:absolute;top: -200px ;left: -130px ; background:black; color:white;padding:10px; border-radius:10px}
p:nth-child(5) {position:absolute;top: -200px ;right: -30px ; background:black; color:white;padding:10px; border-radius:10px}

</style>

</head>

<body>
<h1> 가상요소의 활용 </h1>
<div id=”chat”>
<img src=”1.png” width=”300px” height=”300px” alt=”전혜빈 사진”>
<p><strong>전혜빈 :</strong> 저는 전혜빈 입니다.</p>
<p> 안녕하세요. </p>
<p><strong>전혜빈 :</strong> 안녕하세요.</p>
<p> 가봐야 겠네요 안녕히 계세요 </p>
</div>

</body>

 


 

<script>
var input = prompt(‘input’,”input”)

alert(input)

</script>

 

0511 hw  : transition

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.