hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
58 lines
2.4 KiB
PHP
58 lines
2.4 KiB
PHP
|
|
<script>
|
|
|
|
/* 다음은 테이블 내의 이미지에 마우스 hover시 해당 이미지가 마우스 위치 근처에 3배 확대되어 나타나도록 하는 jQuery 코드 예제입니다.
|
|
|
|
```html
|
|
|
|
동작 방식:
|
|
|
|
페이지 로드 시 body에 #zoomContainer라는 절대 위치의 div를 생성합니다.
|
|
|
|
#myTable 내부의 이미지에 마우스가 올라가면, 해당 이미지의 src와 크기를 가져와 3배 확대된 크기로 #zoomContainer에 이미지 태그를 생성하여 표시합니다.
|
|
|
|
마우스가 움직일 때마다 컨테이너의 위치를 마우스 포인터 근처로 업데이트합니다.
|
|
|
|
이미지에서 마우스가 벗어나면 확대된 이미지를 숨깁니다.
|
|
|
|
이 코드를 페이지 하단에 추가하면 원하는 기능을 구현할 수 있습니다.
|
|
|
|
*/
|
|
$(document).ready(function(){
|
|
// 확대 이미지를 표시할 컨테이너가 없다면 body에 추가
|
|
if($("#zoomContainer").length === 0) {
|
|
$("body").append("<div id='zoomContainer' style='position: absolute; display: none; pointer-events: none; z-index: 9999;'></div>");
|
|
}
|
|
|
|
// #myTable 내부의 모든 이미지에 대해 이벤트 바인딩
|
|
$("#myTable").on("mouseenter", "img", function(e){
|
|
var imgSrc = $(this).attr("src");
|
|
// 원본 이미지의 크기를 가져와서 3배로 확대
|
|
var origWidth = $(this).width();
|
|
var origHeight = $(this).height();
|
|
var zoomWidth = origWidth * 4;
|
|
var zoomHeight = origHeight * 4;
|
|
// 확대 이미지 컨테이너에 이미지 삽입 (원하는 스타일로 꾸밀 수 있음)
|
|
$("#zoomContainer").html("<img src='" + imgSrc + "' style='width:" + zoomWidth + "px; height:" + zoomHeight + "px; border: 1px solid #ccc; background: #fff;'>");
|
|
// 마우스 위치 근처에 컨테이너 표시 (약간의 오프셋 추가)
|
|
$("#zoomContainer").css({
|
|
top: (e.pageY + 15) + "px",
|
|
left: (e.pageX + 15) + "px",
|
|
display: "block"
|
|
});
|
|
});
|
|
|
|
// 마우스 이동에 따라 확대 이미지 컨테이너 위치 업데이트
|
|
$("#myTable").on("mousemove", "img", function(e){
|
|
$("#zoomContainer").css({
|
|
top: (e.pageY + 15) + "px",
|
|
left: (e.pageX + 15) + "px"
|
|
});
|
|
});
|
|
|
|
// 마우스가 이미지 영역을 벗어나면 확대 이미지 숨김
|
|
$("#myTable").on("mouseleave", "img", function(){
|
|
$("#zoomContainer").hide();
|
|
});
|
|
});
|
|
</script> |