JD나 타오바오의 특정 상품에는 돋보기 효과가 있습니다. 인터넷에 비슷한 플러그인이 많지만 프로젝트에 적용하기에는 불편한 점이 많습니다. 비슷한 플러그인을 직접 작성하고 코드를 축적하는 데 시간이 걸리면 해보자!! 🎜>
이 특수 효과를 플러그인에 캡슐화할 계획입니다. 먼저 가장 기본적인 알고리즘을 구현한 다음 단계별로 캡슐화합니다.
최종 효과:
html 코드:
CSS 코드:
<스타일>
* {
여백: 0;
패딩: 0;
}
아무것도 없는 것 같습니다. 강력한 JS 여정을 시작해 보겠습니다.
자바스크립트 코드:
코드 복사 코드는 다음과 같습니다.
함수 createElement(MagnifierId, sImg, bImg) {
var 돋보기 = $(MagnifierId);
Magnifier.style.position = '상대적';
//소형 div
var smallDiv = $Create("div");
smallDiv.setAttribute("id", "small");
smallDiv.style.position = "절대";
//遮罩层
var 마스크 = $Create("div");
마스크.setAttribute("id", "마스크");
마스크.스타일.위치 = "절대";
//그림
var 미러 = $Create("div");
mirror.setAttribute("id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "절대";
mirror.style.display = "없음";
//소소
var smallImg = $Create("img");
smallImg.setAttribute("src", sImg);
smallImg.setAttribute("id", "smallImg");
smallImg.onload = 함수 () {
//如果没设置放大镜적 height或者width 根据小图大小设置放大镜大小
if (!Magnifier.offsetHeight) {
Magnifier.style.width = this.offsetWidth "px";
Magnifier.style.height = this.offsetHeight "px";
}
//遮罩层大소화소소图一样
마스크.스타일.불투명도 = "0";
Mask.style.width = this.width 'px';
Mask.style.height = this.height "px";
마스크.스타일.zIndex = 2;
bigDiv.style.left = this.width 5 "px";
bigDiv.style.top = "-5px";
}
smallDiv.appendChild(마스크);
smallDiv.appendChild(미러);
smallDiv.appendChild(smallImg);
//视窗
var bigDiv = $Create("div");
bigDiv.setAttribute("id", "big");
bigDiv.style.position = "절대";
bigDiv.style.overflow = "숨김";
bigDiv.style.display = "없음";
var bigImg = $Create("img");
bigImg.setAttribute("src", bImg);
bigImg.setAttribute("id", "bigImg");
bigImg.style.position = "절대";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
함수 setMagnifierStyle(mirrorStyle,shichuangStyle) {
//거울
for (mirrorStyle의 var 항목) {
미러.스타일[항목] = 미러스타일[항목];
}
for (shichuangStyle의 var 항목) {
$("big").style[item] = 시추앙스타일[item];
}
}
함수 레지스터이벤트() {
$("mask").onmouseover = 함수 () {
$("big").style.display = "차단";
mirror.style.display = "차단";
}
$("mask").onmouseout = 함수 () {
$("big").style.display = "없음";
mirror.style.display = "없음";
}
$("mask").onmousemove = 함수(evt) {
var oEvent = evt || 이벤트;
var disX = oEvent.offsetX;
var disY = oEvent.offsetY;
var mirrorLeft = disX - mirror.offsetWidth / 2;
var mirrorTop = disY - mirror.offsetHeight / 2;
if (mirrorLeft < 0) {
미러왼쪽 = 0;
}
else if (mirrorLeft > Mask.offsetWidth - mirror.offsetWidth) {
mirrorLeft = 마스크.offsetWidth - mirror.offsetWidth;
}
if (mirrorTop < 0) {
미러탑 = 0;
}
else if (mirrorTop > Mask.offsetHeight - mirror.offsetHeight) {
mirrorTop = 마스크.오프셋높이 - 미러.오프셋높이;
}
mirror.style.top = 미러탑 "px";
mirror.style.left = mirrorLeft "px";
var paX = mirrorTop / (mask.offsetHeight - mirror.offsetHeight);
var paY = mirrorLeft / (mask.offsetWidth - mirror.offsetWidth);
$("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) "px";
$("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) "px";
}
}
$(id) 함수 {
return document.getElementById(id);
}
함수 $Create(유형) {
return document.createElement(type);
}
最后再 onload소소한 용도의 다운로드:
window.onload = 함수() {
createElement("돋보기", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");
setMagnifierStyle({ "너비": "30px", "높이": "30px", "배경색상": "#fff" }, { "너비": "250px", "높이": "250px" });
등록이벤트();
}
效果总算판매来了耶，
2. 接下来咱们封装吧：
Magnifer类代码：
기능돋보기(
Magnifierid, // 미러 컨테이너 ID 확대
sImg,
bImg, 때문에
MirrorStyle, //소형렌즈 스타일에서는 json 형식의 데이터
>
) {
var _this = this;
This.MagnifierContainer = null; //컨테이너
This.smallDiv = null; //작은 이미지 컨테이너
This.mask = null; //작은 이미지 마스크 레이어
~
This.smallImg = null; //작은 이미지
This.bigDiv = null; //미리보기
This.bigImg = null;
var init = 함수 () {
_this.MagnifierContainer = _this.$(MagnifierId);
_this.createElement(sImg, bImg);
_this.setMagnifierStyle(mirrorStyle, ViewStyle);
_this.MainEvent();
}
init();
}
Magnifier.prototype.createElement = 함수(sImg, bImg) {
var _this = this;
var $Create = this.$Create;
This.MagnifierContainer.style.position = 'relative'; //문서 흐름에서 벗어나 적절하게 수정
This.smallDiv = $Create("div");
This.smallDiv.setAttribute("id", "small");
This.smallDiv.style.position = "절대";
This.mask = $Create("div");
This.mask.setAttribute("id", "mask");
This.mask.style.position = "절대";
This.mirror = $Create("div");
This.mirror.setAttribute("id", "mirror");
This.mirror.style.opacity = 0.3;
This.mirror.style.position = "절대";
This.mirror.style.display = "없음";
This.smallImg = $Create("img");
This.smallImg.setAttribute("src", sImg);
This.smallImg.setAttribute("id", "smallImg");
This.smallImg.onload = 함수() {
//돋보기의 높이나 너비가 설정되지 않은 경우 썸네일 크기에 맞춰 돋보기의 크기를 설정합니다
If (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth "px";
_this.MagnifierContainer.style.height = this.offsetHeight "px";
}
//마스크 레이어의 크기는 작은 이미지와 동일합니다
_this.mask.style.opacity = "0";
_this.mask.style.width = this.offsetWidth 'px';
_this.mask.style.height = this.offsetHeight "px";
_this.mask.style.zIndex = 2;
_this.bigDiv.style.left = this.offsetWidth 5 "px";
_this.bigDiv.style.top = "-5px";
}
This.smallDiv.appendChild(this.mask);
This.smallDiv.appendChild(this.mirror);
This.smallDiv.appendChild(this.smallImg);
This.bigDiv = $Create("div");
This.bigDiv.setAttribute("id", "big");
This.bigDiv.style.position = "절대";
This.bigDiv.style.overflow = "숨김";
This.bigDiv.style.display = "없음";
This.bigImg = $Create("img");
This.bigImg.setAttribute("src", bImg);
This.bigImg.setAttribute("id", "bigImg");
This.bigImg.style.position = "절대";
This.bigDiv.appendChild(this.bigImg);
This.MagnifierContainer.appendChild(this.smallDiv);
This.MagnifierContainer.appendChild(this.bigDiv);
}
Magnifier.prototype.setMagnifierStyle = 함수(mirrorStyle, ViewStyle) {
for (mirrorStyle의 var 항목) {
this.mirror.style[item] = 미러스타일[item];
}
항목 삭제;
for (ViewStyle의 var 항목) {
this.bigDiv.style[item] = 뷰스타일[item];
}
}
Magnifier.prototype.MainEvent = 함수() {
var _this = this;
this.mask.onmouseover = 함수() {
_this.bigDiv.style.display = "차단";
_this.mirror.style.display = "차단";
}
this.mask.onmouseout = 함수 () {
_this.bigDiv.style.display = "없음";
_this.mirror.style.display = "없음";
}
this.mask.onmousemove = 함수(evt) {
var oEvent = evt || 이벤트;
var disX = oEvent.offsetX || oEvent.layerX; //兼容ff
var disY = oEvent.offsetY || oEvent.layerY;
var mirrorLeft = disX - _this.mirror.offsetWidth / 2;
var mirrorTop = disY - _this.mirror.offsetHeight / 2;
if (mirrorLeft < 0) {
미러왼쪽 = 0;
}
else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
mirrorLeft = this.offsetWidth - mirror.offsetWidth;
}
if (mirrorTop < 0) {
미러탑 = 0;
}
else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {
mirrorTop = this.offsetHeight - _this.mirror.offsetHeight;
}
_this.mirror.style.top = 미러탑 "px";
_this.mirror.style.left = 미러왼쪽 "px";
var paX = mirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
var paY = mirrorLeft / (this.offsetWidth - _this.mirror.offsetWidth);
_this.bigImg.style.top = -paX * (_this.bigImg.offsetHeight - _this.bigDiv.offsetHeight) "px";
_this.bigImg.style.left = -paY * (_this.bigImg.offsetWidth - _this.bigDiv.offsetWidth) "px";
}
}
Magnifier.prototype.$ = 함수(id) {
return document.getElementById(id);
}
Magnifier.prototype.$Create = 함수(유형) {
return document.createElement(type);
}
最后재onload调사용 다운로드：
window.onload = 함수() {
새로운 돋보기(
"돋보기",
"이미지/돋보기/small.jpg",
"이미지/돋보기/big.jpg",
{ "너비": "30px", "높이": "30px", "배경색상": "#fff" },
{ "너비": "250px", "높이": "250px" }
);
}
以上就是本文所述의 전체 부서 内容了, 希望大家能够喜欢。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
