JS 전자상거래 상품 전시 확대경 효과 실현
지식 점
1.children 로 태그 그룹 가 져 오기
2.현재 마우스 좌표 구하 기
3.충돌 검출
4.크기 상 자 는 비율 로 동기 화
실행 효과
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
border: none;
}
#box {
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
#box > #small_box {
height: 100%;
width: 100%;
border: 1px solid #cccccc;
box-sizing: border-box;
position: relative;
}
#box > #small_box > img {
height: 100%;
width: 100%;
}
#box > #small_box > #mask {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0, .4);
position: absolute;
left: 0;
top: 0;
cursor: move;
/* */
display: none;
}
#box > #big_box {
height: 600px;
width: 600px;
border: 1px solid #cccccc;
position: absolute;
left: 360px;
top: 0;
overflow: hidden;
display: none;
}
#box > #big_box > img{
position: absolute;
left: 0;
top: 0;
}
#list {
margin: 20px 0 0 100px;
}
#list ul li {
float: left;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="images/pic001.jpg" alt="">
<span id="mask"></span>
</div>
<div id="big_box">
<img src="images/pic01.jpg" alt="">
</div>
</div>
<div id="list">
<ul>
<li><img src="images/pic0001.jpg" alt=""></li>
<li><img src="images/pic0002.jpg" alt=""></li>
<li><img src="images/pic0003.jpg" alt=""></li>
<li><img src="images/pic0004.jpg" alt=""></li>
</ul>
</div>
<script src="../../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load', function (ev) {
// 1.
var box = myTools.$('box'), s_box = box.children[0], b_box = box.children[1], mask = s_box.children[1];
var list_Lis = myTools.$('list').getElementsByTagName('li');
b_img = b_box.children[0];
// 2.
s_box.addEventListener('mouseover', function (evt) {
// 2.1
mask.style.display = 'block';
b_box.style.display = 'block';
// 2.2
s_box.addEventListener('mousemove', function (evt1) {
var e = evt1 || window.event;
// 2.3
var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5;
var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5;
// 2.4
if (pointX < 0) {
pointX = 0
} else if (pointX >= s_box.offsetWidth - mask.offsetWidth - 2) {
pointX = s_box.offsetWidth - mask.offsetWidth - 2;
}
if (pointY < 0) {
pointY = 0
} else if (pointY >= s_box.offsetHeight - mask.offsetHeight - 2) {
pointY = s_box.offsetHeight - mask.offsetHeight - 2;
}
// 2.5
mask.style.left = pointX + 'px';
mask.style.top = pointY + 'px';
// 2.6
/*
* smallX / bigX = sBox.width / bBox.width
* bixX = smallX/(sBox.width / bBox.width)
* */
b_img.style.left = -pointX / (s_box.offsetWidth/b_box.offsetWidth) + 'px';
b_img.style.top = -pointY / (s_box.offsetHeight/b_box.offsetHeight) + 'px';
})
});
// 3.
s_box.addEventListener('mouseout', function (evt) {
// 2.1
mask.style.display = 'none';
b_box.style.display = 'none';
});
// 4. li
for (var i = 0; i < list_Lis.length; i++) {
(function (i) {
var li = list_Lis[i];
li.addEventListener('mouseover',function (ev1) {
s_box.children[0].src = 'images/pic0'+(i+1)+'.jpg';
b_img.src = 'images/pic0'+(i+1)+'.jpg';
});
})(i);
}
});
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.