html
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<main>
<div class="slider">
<div class="img-magnifier-container">
<img
class="myimage"
src="https://picsum.photos/600/400"
width="600"
height="400"
/>
</div>
<div class="img-magnifier-container">
<img
class="myimage"
src="https://picsum.photos/1200/800"
width="600"
height="400"
/>
</div>
</div>
</main>
라이브러리 버전에 신경써서 작업해야합니다.
JavaScript
import './style.css';
var glass = document.createElement('DIV');
glass.setAttribute('class', 'img-magnifier-glass');
glass.style.backgroundRepeat = 'no-repeat';
function magnify(img, zoom) {
var w, h, bw;
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundSize =
img.width * zoom + 'px ' + img.height * zoom + 'px';
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener('mousemove', moveMagnifier);
img.addEventListener('mousemove', moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener('touchmove', moveMagnifier);
img.addEventListener('touchmove', moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - w / zoom) {
x = img.width - w / zoom;
}
if (x < w / zoom) {
x = w / zoom;
}
if (y > img.height - h / zoom) {
y = img.height - h / zoom;
}
if (y < h / zoom) {
y = h / zoom;
}
/*set the position of the magnifier glass:*/
glass.style.left = x - w + 'px';
glass.style.top = y - h + 'px';
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition =
'-' + (x * zoom - w + bw) + 'px -' + (y * zoom - h + bw) + 'px';
}
function getCursorPos(e) {
var a,
x = 0,
y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return { x: x, y: y };
}
}
$('.slider').bxSlider({
onSliderLoad: function () {
magnify(this.getCurrentSlideElement().children('.myimage')[0], 3);
},
onSlideBefore: function ($slideElement) {
magnify($slideElement.children('.myimage')[0], 3);
},
});
CSS
* {
box-sizing: border-box;
}
.img-magnifier-container {
position: relative;
}
.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
width: 100px;
height: 100px;
}
main {
width: 600px;
}
'HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
| 그리드 레이아웃 샘플 코드를 만들어보자 (2) | 2021.11.02 |
|---|---|
| 클래스에 innerHTML 로 html 코드 추가하기 (0) | 2021.10.14 |
| html 에서 마우스 오버시 이미지 전환하는 코드 (0) | 2021.07.15 |
| 제이쿼리로(자바스크립트) HTML에 클래스 추가 OR 삭제하기 (0) | 2021.07.14 |
| 모바일 슬라이드 메뉴 토글 조건문 형식 제이쿼리 (0) | 2021.07.14 |