JDまたはTaobaoの特定の製品は、虫眼鏡の効果があります。インターネットには多くの同様のプラグインがありますが、プロジェクトに適用する場合は多くの不便があります。同様のプラグインと蓄積されたコードを作成するのに時間がかかりました。どうしてそれをしないのか!!レットゴー:
この特殊効果をプラグインにカプセル化し、最初に最も基本的なアルゴリズムを実装し、次に段階的にカプセル化する予定です。
最終的な効果:
HTMLコード:
コードコピーは次のとおりです。
<div id = "magnifier"> </div>
CSSコード:
コードコピーは次のとおりです。
<style>
* {
マージン:0;
パディング:0;
}
</style>
何もないようです、私たちの強力なJSの旅を始めましょう:
JavaScriptコード:
コードコピーは次のとおりです。
関数CreateElement(Magnifierid、Simg、bimg){
var magnifier = $(magnifierid);
magnifier.style.position = 'relative';
// Small Picture Div
var smalldiv = $ create( "div");
smalldiv.setattribute( "id"、 "small");
smalldiv.style.position = "absolute";
//マスクレイヤー
var mask = $ create( "div");
mask.setattribute( "id"、 "mask");
mask.style.position = "absolute";
//レンズ
var mirror = $ create( "div");
mirror.setattribute( "id"、 "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "absolute";
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(Mirror);
Smalldiv.AppendChild(Smallimg);
// Windows
var bigdiv = $ create( "div");
bigdiv.setattribute( "id"、 "big");
bigdiv.style.position = "absolute";
bigdiv.style.overflow = "hidden";
bigdiv.style.display = "none";
var bigimg = $ create( "img");
bigimg.setattribute( "src"、bimg);
bigimg.setattribute( "id"、 "bigimg");
bigimg.style.position = "absolute";
bigdiv.appendchild(bigimg);
Magnifier.AppendChild(SmallDiv);
Magnifier.AppendChild(BigDiv);
}
function setMagnifierStyle(MirrorStyle、Shichangstyle){
//鏡
for(mirrirstyleのvarアイテム){
mirror.style [item] = mirrerstyle [item];
}
for(shichangstyleのvarアイテム){
$( "Big")。スタイル[item] = shichangstyle [item];
}
}
function RegisterEvent(){
$( "mask")。onmouseover = function(){
$( "big")。style.display = "block";
mirror.style.display = "block";
}
$( "mask")。onmouseout = function(){
$( "big")。style.display = "none";
mirror.style.display = "none";
}
$( "mask")。onmousemove = function(evt){
var oevent = evt ||イベント;
var disx = oevent.offsetx;
var disy = oevent.offsety;
var mirrirleft = disx -mirror.offsetwidth / 2;
var mirrortop = disy -mirror.offsetheight / 2;
if(mirrirleft <0){
MirrorLeft = 0;
}
else if(mirrerleft> mask.offsetwidth -mirrer.offsetwidth){
mirrerleft = mask.offsetwidth -mirrer.offsetwidth;
}
if(mirrortop <0){
mirrortop = 0;
}
else if(mirrortop> mask.offseTheight -mirris.offseeth){
mirrortop = mask.offseTheight -mirris.offseTheight;
}
mirror.style.top = mirrortop + "px";
mirror.style.left = mirrerleft + "px";
var pax = mirrortop /(mask.offseTheight -mirror.offseTheight);
var pay = mirrerleft /(mask.offsetwidth -mirrer.offsetwidth);
$( "bigimg")。style.top = -pax *($( "bigimg")。offseetheight- $( "big")。
$( "bigimg")。style.left = -pay *($( "bigimg")。offsetwidth -$( "big")。offsetWidth) + "px";
}
}
function $(id){
document.getElementByID(ID)を返します。
}
function $ create(type){
document.createelement(タイプ)を返します。
}
最後に、それをオンロードと呼びましょう:
コードコピーは次のとおりです。
window.onload = function(){
createElement( "magnifier"、 "images/magnifier/small.jpg"、 "images/magnifier/big.jpg");
setMagnifierStyle({"width": "30px"、 "height": "30px"、 "backgroundcolor": "#ffff"}、{"width": "250px"、 "height": "250px"});
RegisterEvent();
}
効果は最終的に計算されました。
2。次にそれをカプセル化しましょう:
マグニファークラスコード:
コードコピーは次のとおりです。
関数拡大器(
マグニフィアリド、//マグニファイアコンテナID
Simg、//小さな画像src
bimg、//大きな画像src
MirrorStyle、//小さな画像のレンズスタイル、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。$(magnifierid);
_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 = 'relative'; //ドキュメントフローから遠く離れて、必要に応じて変更する
this.smalldiv = $ create( "div");
this.smalldiv.setattribute( "id"、 "small");
this.smalldiv.style.position = "absolute";
this.mask = $ create( "div");
this.mask.setattribute( "id"、 "mask");
this.mask.style.position = "absolute";
this.mirror = $ create( "div");
this.mirror.setattribute( "id"、 "mirror");
this.mirror.style.opacity = 0.3;
this.mirror.style.position = "absolute";
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.offseeth){
_this.magnifiercontainer.style.width = this.offsetwidth + "px";
_this.magnifiercontainer.style.height = this.offseetheight + "px";
}
//マスクレイヤーサイズは小さな画像と同じです
_this.mask.style.opacity = "0";
_this.mask.style.width = this.offsetwidth + 'px';
_this.mask.style.height = this.offseeth + "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 = "absolute";
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 = "absolute";
this.bigdiv.appendchild(this.bigimg);
this.magnifiercontainer.appendChild(this.smalldiv);
this.magnifiercontainer.appendChild(this.bigdiv);
}
MAGNIFIER.PROTOTYPE.SETMAGNIFIERSTYLE = FUNCTION(MirrorStyle、ViewStyle){
for(mirrirstyleのvarアイテム){
this.mirror.style [item] = mirrerStyle [item];
}
アイテムを削除します。
for(vir item in ViewStyle){
this.bigdiv.style [item] = viewstyle [item];
}
}
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 mirrirleft = disx -_this.mirror.offsetwidth / 2;
var mirrortop = disy -_this.mirror.offseetheight / 2;
if(mirrirleft <0){
MirrorLeft = 0;
}
else if(mirrerleft> this.offsetwidth- _this.mirror.offsetwidth){
mirrerLeft = this.offsetWidth -mirrer.offsetWidth;
}
if(mirrortop <0){
mirrortop = 0;
}
else if(mirrortop> this.offseetheight -_this.mirror.offseetheight){
mirrortop = this.offseTheight -_this.mirror.offseTheight;
}
_this.mirror.style.top = mirrortop + "px";
_this.mirror.style.left = mirrerleft + "px";
var pax = mirrortop /(this.offseetheight -_this.mirror.offseetheight);
var pay = mirrerleft /(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.PROTOTYTE。$ = function(id){
document.getElementByID(ID)を返します。
}
MAGNIFIER.PROTOTYTE。$ create = function(type){
document.createelement(タイプ)を返します。
}
最後に、オンロードコールの下で:
コードコピーは次のとおりです。
window.onload = function(){
新しい拡大器(
「マグニフィア」、
「Images/Magnifier/Small.jpg」、
「Images/Magnifier/Big.jpg」、
{"width": "30px"、 "height": "30px"、 "backgroundcolor": "#ffff"}、
{"width": "250px"、 "height": "250px"}
);
}
上記はこの記事で説明されているすべてのコンテンツです。あなたがそれを気に入っていただければ幸いです。