돋보기 효과를 얻으려면 순수 자바스크립트를 사용하세요._javascript 기술

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" }
                );
        }

以上就是本文所述의 전체 부서 内容了, 希望大家能够喜欢。