<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style type="text/css">
.fg{
float: left;
}
.fg img {
border: 5px groove orange;
border-radius: 50px;
padding: 10px;
cursor: pointer;
}
.fg figcaption{
font-family: 'Do Hyeon';
font-weight: bold;
font-size: 1.3em;
}
.large{
width: 450px;
height: 500px;
position: absolute;
left: 400px;
top: 220px;
border: 5px inset gold;
}
</style>
<script type="text/javascript">
//결과.. 작은 이미지 누르면 div.large에 나타내기
$(function () {
//큰이미지
$("img.large").attr("src",$(".fg img:eq(0)").attr("src"));
//작은이미지에 마우스 올리면 45도 회전,벗어나면 다시 제자리
$(".fg img").hover(function(){
$(this).css("transform","rotate(45deg)");
},function(){
$(this).css("transform","rotate(0deg)");
});
//작은이미지 클릭하면 해당이미지 large에 나타나게 한다
$(".fg img").click(function(){
$("img.large").attr("src",$(this).attr("src"));
});
</script>
</head>
<body>
<div id="show"></div>
<img alt="" src="" class="large" id="large">
<script type="text/javascript">
var imginfo=[
{name: "../image/01.png",caption: "이미지1",width: "120"},
{name: "../image/02.png",caption: "이미지2",width: "130"},
{name: "../image/03.png",caption: "이미지3",width: "90"},
{name: "../image/04.png",caption: "이미지4",width: "100"},
{name: "../image/05.png",caption: "이미지5",width: "110"}
];
//figure태그 이용해서 show에 이미지 넣기
var s=""; //누적시킬 값
$.each(imginfo, function(i, elt) {
s+="<figure class='fg'>";
s+="<img src='"+elt.name+"' width='"+elt.width+"'>";
s+="<figcaption>"+elt.caption+"</figcaption>";
s+="</figure>";
});
$("#show").html(s);
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| 211006_on(동적/정적) (0) | 2021.10.06 |
|---|---|
| 21006_animate,button,each (0) | 2021.10.06 |
| 211006_array,each (0) | 2021.10.06 |
| 211006_figure (0) | 2021.10.06 |
| 211006_div,click,hide,show (0) | 2021.10.06 |