코딩교육/Web
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법
목동코딩학원
2021. 9. 15. 16:08
728x90
목동코딩:
이번에하는 프로젝트는 이미지를 많이 다루는 사이트이다. 컴퓨터에서 보기에는 불편함이 없으나, 모바일에서 보려면 아무래도 확대해서 표시해야 할거 같아서 구글 검색으로 적용한 방법임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.enLargeFrame {
position: absolute;
display: none;
justify-content: center;
align-items: center;
top:0%;
width:100%;
height:100%;
background-color: gray;
z-index: 100;
background:rgba(255,255,255,0.5);
}
.enLarge {
position: relative;
display:flex;
justify-content: center;
align-items: center;
}
.enLarge img {
width:100%;
}
</style>
</head>
<body>
<h1>이미지 크게보기</h1>
<hr>
<div class='enLargeFrame'>
<div class='enLarge'>
</div>
</div>
<img src="http://nooh-system.com/images/logo_nooh_white.png">
<img src="http://nooh-system.com/assets/img/portfolio/4.jpg">
</body>
<script type="text/javascript">
$(document).ready(function (e){
$(document).on("click","img",function(){
var path = $(this).attr('src')
showImage(path);
});
function showImage(fileCallPath){
$(".enLargeFrame").css("display","flex").show();
$(".enLarge")
.html("<img src='"+fileCallPath+"' >")
.animate({width:'100%', height: '100%'}, 1000);
}
$(".enLargeFrame").on("click", function(e){
$(".enLarge").animate({width:'0%', height: '0%'}, 1000);
setTimeout(function(){
$('.enLargeFrame').hide();
}, 1000);
});
});
</script>
</html>
728x90