티스토리 뷰

WEB/JQuery

jQuery 클릭히든뷰

silverline79 2025. 1. 10. 19:02

 

클릭히든뷰.html
0.00MB

 

 

 

클릭전

클릭후

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".view_img").click(function(){
		$(".view_movie_box").addClass('display_block');
		$(".view_img").toggleClass('display_none');
	});
	$(".view_movie_close").click(function(){
		$(".view_movie_box").removeClass('display_block'); 
		$(".view_img").toggleClass('display_block');  
	});
});

 
</script>
<style>
body { margin: 0; padding: 0; }
.view_box { float: left; width: 300px; height: 300px; position: relative; }
.view_img { position: absolute; top: 0; left: 0; float: left; width: 300px; height: 300px; background-color: #999; cursor: pointer; }
.view_movie { float: left; width: 300px; height: 300px; }
.view_movie_box { position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: #FCC; }
.view_movie_close { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: #666; cursor: pointer; border: 1px solid; }
.display_none { display: none !important; }
.display_block { display: block !important; }
.view_btn { position: absolute; top: 0; right: 0; width: 50px; height: 50px; }
.view_open { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: #666; cursor: pointer; border: 1px solid; }
.view_close { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: #666; cursor: pointer; border: 1px solid; }
</style>
</head>

<body>
<div class="view_box">
	<div class="view_img">이미지삽입</div>
	<div class="view_movie_box  display_none">
		<div class="view_movie">영상재생</div>
		<div class="view_movie_close">닫기</div>
	</div>
</div>
</body>
</html>

 

'WEB > JQuery' 카테고리의 다른 글

모바일 메뉴 더보기 클릭 JQuery  (0) 2025.01.10
jQuery 클릭히든뷰2  (0) 2025.01.10
flexslider 이미지슬라이드 JQuery  (0) 2025.01.10
[이미지슬라이드] swiperjs 스크립트 정리  (0) 2024.10.31
jQuery Modal  (2) 2024.10.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함