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
'코딩교육 > Web' 카테고리의 다른 글
| 목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법! (0) | 2021.09.18 |
|---|---|
| 목동코딩학원, Html, Modal 폼 열고 닫는 방법 (0) | 2021.09.15 |
| 목동코딩, html, Input 입력 유효성 체크하는 방법 (0) | 2021.09.15 |
| 목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법 (0) | 2021.09.14 |
| 목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플 (0) | 2021.09.07 |