-
211006_이미지의 배경사진 변경JQuery 2021. 10. 7. 09:45
<!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">
body,h1,ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background-color: #fff;
}
div.wall{
width: 800px;
height: 600px;
margin: 50px auto;
background-color: #999;
position: relative;
border-radius: 5px;
border: 5px solid #333;
overflow: hidden; /* 스크롤바 해제..기본은 auto */
}
h1.title{
font-size: 37px;
position: absolute;
right: 50px;
top: 60px;
width: 130px;
font-family: 'Do Hyeon';
}
ul.list{
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
left: 0;
border-top: 1px solid #666;
}
ul.list li {
float: left;
margin-left: 10px;
margin-top: 10px;
width: 70px;
height: 70px;
border: 5px solid #333;
border-radius: 10px;
cursor: pointer;
}
div.wall ul.list li img {
width: 100%;
}
/* 제이쿼리에서 사용할 클래스..active */
/* active: 클릭했을 때..hover(마우스 올렸을 때)와 비슷하나 다름 */
div.wall ul.list li.active {
border-color: #ff1493; /* 벽지샘플 테두리 */
}
</style>
<script type="text/javascript">
$(function () {
//벽지 list 이미지(6개) 클릭시
$(".list li img").click(function() {
//현재 클릭한 이미지의 부모인 li에 active클래스 추가
$(this).parent().addClass("active");
//부모태그(li)의 형제태그에 들어있는 active 제거..addclass,removeclass
$(this).parent().siblings().removeClass("active");
//클릭한 이미지의 title 속성 얻기(변수처리)
var s=$(this).attr("title");
//위에서 얻은 title을 h1.title에다가 넣기
$("hi.title").html(s);
//클릭한 이미지의 src속성을 얻는다(변수처리)
var imgsrc=$(this).attr("src");
//얻은 변수를 이용하여 div.wall에 배경이미지로 넣기
//백그라운드이미지는 url로 줌
var url="url('"+imgsrc+"')";
$("div.wall").css("background-image", url);
});
});
</script>
</head>
<body>
<div class="wall">
<h1 class="title">Select Page</h1>
<img alt="" src="../image/cover2.png">
<ul class="list">
<li><img alt="" src="../image/b01.png" title="pear"></li>
<li><img alt="" src="../image/b02.png" title="check"></li>
<li><img alt="" src="../image/b03.png" title="bamboo"></li>
<li><img alt="" src="../image/b04.png" title="pencil"></li>
<li><img alt="" src="../image/b05.png" title="leaf"></li>
<li><img alt="" src="../image/b06.png" title="tree"></li>
</ul>
</div>
</body>
</html>
'JQuery' 카테고리의 다른 글
211007_div,z-index (0) 2021.10.07 211007_trigger (0) 2021.10.07 211006_on,button(영화관,영화) (0) 2021.10.06 211006_ (0) 2021.10.06 211006_on(동적/정적) (0) 2021.10.06