JD 또는 Taobao의 특정 제품은 확대 유리의 영향을 미칩니다. 인터넷에는 유사한 플러그인이 많이 있지만 프로젝트에 적용 할 때 많은 불편 함이 있습니다. 비슷한 플러그인과 누적 된 코드를 작성하는 데 시간이 걸렸습니다. 왜 그렇게하지 않습니까 !! let'go :
이 특수 효과를 플러그인으로 캡슐화하고 먼저 가장 기본적인 알고리즘을 구현 한 다음 단계별로 캡슐화 할 계획입니다.
최종 효과 :
HTML 코드 :
코드 사본은 다음과 같습니다.
<div id = "돋보기"> </div>
CSS 코드 :
코드 사본은 다음과 같습니다.
<스타일>
* {
여백 : 0;
패딩 : 0;
}
</스타일>
아무것도없는 것 같습니다. 강력한 JS 여행을 시작합시다.
자바 스크립트 코드 :
코드 사본은 다음과 같습니다.
함수 createElement (magnifierid, simg, bimg) {
var invirifier = $ (magifierid);
magnifier.style.position = '상대';
// 작은 그림 div
var smalldiv = $ create ( "div");
smalldiv.setattribute ( "id", "small");
smalldiv.style.position = "절대";
// 마스크 레이어
var mask = $ create ( "div");
mask.setattribute ( "id", "mask");
mask.style.position = "절대";
//렌즈
var mirror = $ create ( "div");
mirror.setattribute ( "id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "절대";
mirror.style.display = "none";
// 작은 사진
var smallimg = $ create ( "IMG");
smallimg.setattribute ( "src", simg);
smallimg.setattribute ( "id", "smallimg");
smallimg.onload = function () {
// 돋보기의 높이 또는 너비가 설정되지 않으면 작은 그림의 크기에 따라 확대 유리의 크기를 설정하십시오.
if (! magnifier.offsetheight) {
magnifier.style.width = this.offsetWidth+"px";
magnifier.style.height = this.offSetheight + "px";
}
// 마스크 레이어 크기는 작은 그림과 동일합니다.
mask.style.opacity = "0";
mask.style.width = this.width + 'px';
mask.style.height = this.height + "px";
mask.style.zindex = 2;
bigdiv.style.left = this.width + 5 + "px";
bigdiv.style.top = "-5px";
}
Smalldiv. AppendChild (마스크);
Smalldiv. AppendChild (미러);
Smalldiv. AppendChild (SmallIMG);
// Windows
var bigdiv = $ create ( "div");
bigdiv.setattribute ( "id", "big");
bigdiv.style.position = "절대";
bigdiv.style.overflow = "숨겨진";
bigdiv.style.display = "none";
var bigimg = $ create ( "IMG");
bigimg.setattribute ( "src", bimg);
bigimg.setattribute ( "id", "bigimg");
bigimg.style.position = "절대";
bigdiv. AppendChild (bigimg);
MAGIFIER.AppendChild (SmallDiv);
MAGIFIER.AppendChild (bigdiv);
}
함수 setMagnifierstyle (MirrorStyle, Shichangstyle) {
//거울
for (mirrorstyle의 var 항목) {
mirror.style [item] = mirrorstyle [item];
}
for (shichangstyle의 var 항목) {
$ ( "big"). 스타일 [항목] = Shichangstyle [항목];
}
}
함수 registerevent () {
$ ( "mask"). OnMouseOver = function () {
$ ( "big"). style.display = "block";
mirror.style.display = "block";
}
$ ( "mask"). OnMouseOut = function () {
$ ( "big"). style.display = "none";
mirror.style.display = "none";
}
$ ( "마스크"). OnMousEmove = function (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) {
mirrorleft = 0;
}
else if (mirrorleft> mask.offsetWidth -mirror.offsetWidth) {
mirrorleft = mask.offsetwidth -mirror.offsetwidth;
}
if (mirrortop <0) {
mirrortop = 0;
}
else if (mirrortop> mask.offsetheight -mirror.offsetheight) {
mirrortop = mask.offsetheight -mirror.offsetheight;
}
mirror.style.top = mirrortop + "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"). offesetheight) + "px";
$ ( "bigimg"). style.left = -pay * ($ ( "bigimg"). offsetWidth- $ ( "big"). offsetWidth) + "px";
}
}
함수 $ (id) {
return document.getElementById (id);
}
함수 $ create (type) {
return document.createElement (유형);
}
마지막으로, onload라고 부릅니다.
코드 사본은 다음과 같습니다.
Window.onload = function () {
CreateElement ( "Magnifier", "이미지/magnifier/small.jpg", "images/magifier/big.jpg");
setMagnifiersTyle ({ "width": "30px", "Height": "30px", "BackgroundColor": "#ffff"}, { "width": "250px", "높이": "250px"});
RegisterEvent ();
}
효과는 마침내 계산되었습니다.
2. 다음에 캡슐화합시다.
미니퍼 클래스 코드 :
코드 사본은 다음과 같습니다.
함수 확대기 (
MAGIFIERID, // MAGIFIER CANTORENER ID
simg, // 작은 그림 SRC
BIMG, // 큰 그림 SRC
미러 스타일, // 작은 그림의 렌즈 스타일, JSON 형식 데이터
ViewStyle // 미리보기 창 스타일, JSON 형식 데이터
) {
var _this = this;
this.magnifiercontainer = null; //컨테이너
this.smalldiv = null; // 작은 이미지 컨테이너
this.mask = null; // 작은 이미지 마스크 레이어
this.mirror = null; // 작은 그림 렌즈
this.smallimg = null; // 작은 사진
this.bigdiv = null; // 미리보기보기
this.bigimg = null; // 큰 이미지
var init = function () {
_this.magnifiercontainer = _this. $ (magifierid);
_this.createElement (simg, bimg);
_this.setmagnifierstyle (mirrorstyle, viewstyle);
_this.mainevent ();
}
init ();
}
magnifier.prototype.createElement = function (simg, bimg) {
var _this = this;
var $ create = this. $ create;
this.magnifiercontainer.style.position = 'elative'; // 문서에서 멀리 떨어져 흐르고 적절하게 수정합니다.
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 = "none";
this.smallimg = $ create ( "img");
this.smallimg.setattribute ( "src", simg);
this.smallimg.setattribute ( "id", "smallimg");
this.smallimg.onload = function () {
// 돋보기의 높이 또는 너비가 설정되지 않으면 작은 그림의 크기에 따라 확대 유리의 크기를 설정하십시오.
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 = "Hidden";
this.bigdiv.style.display = "none";
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 = function (mirrorstyle, viewstyle) {
for (mirrorstyle의 var 항목) {
this.mirror.style [item] = mirrorstyle [item];
}
항목 삭제;
for (ViewStyle의 var 항목) {
this.bigdiv.style [item] = ViewStyle [항목];
}
}
magnifier.prototype.mainevent = function () {
var _this = this;
this.mask.onmouseover = function () {
_this.bigdiv.style.display = "block";
_this.mirror.style.display = "block";
}
this.mask.onmouseout = function () {
_this.bigdiv.style.display = "none";
_this.mirror.style.display = "none";
}
this.mask.onmouseMove = function (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) {
mirrorleft = 0;
}
else if (mirrorleft> this.offsetWidth- _this.mirror.offsetWidth) {
mirrorleft = this.offsetWidth -Mirror.OffSetWidth;
}
if (mirrortop <0) {
mirrortop = 0;
}
else if (mirrortop> this.offsetheight- _this.mirror.offsetheight) {
mirrortop = this.offsetheight- _this.mirror.offsetheight;
}
_this.mirror.style.top = mirrortop + "px";
_this.mirror.style.left = mirrorleft + "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. $ = function (id) {
return document.getElementById (id);
}
magnifier.prototype. $ create = function (type) {
return document.createElement (유형);
}
마지막으로, onload 통화에서 :
코드 사본은 다음과 같습니다.
Window.onload = function () {
새로운 돋보기 (
"magnifier",
"이미지/돋보기/small.jpg",
"이미지/돋보기/big.jpg",
{ "width": "30px", "높이": "30px", "backgroundColor": "#ffff"},
{ "width": "250px", "높이": "250px"}
);
}
위는이 기사에 설명 된 모든 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다.