jQueryチリ画像遠隔ズームplug-in_jquery

ローカル画像、リモート画像、および小さすぎる画像をこのプラグインに適合させるには、多くの詳細に対処する必要があります。

最初に構造を定義します。

<code class="html">
<div class="imgMagnifierWrap">
<div class="overlay"><!--覆盖层，鼠标的感应区域，位于小图上最方--></div>
<div class="tipboxHover"><!--小图上方的悬停提示方框--></div>
<div class="imgOriginal"><!--装载大图的容器，绝对定位<img src="bigOne.jpg" /><!--前景大图，绝对定位--></div>
</div>
</code>

<code class="css">
<!--样式-->
<style type="text/css">
.imgMagnifierWrap *{position:absolute;background:#fff;}
.imgMagnifierWrap .tipboxHover{width:80px; height:60px; filter:alpha(opacity=30);opacity:.3;display:none;}
.imgMagnifierWrap .imgOriginal{display:none;z-index:9999;overflow:hidden; width:400px; height:400px;
    background-color:#cdf; background-repeat:no-repeat; text-align:center;border:1px solid #555; }
.imgMagnifierWrap .overlay{cursor:crosshair;filter:alpha(opacity=0);opacity:0;}
<style>
</code>

次に、画像のプリロードを検討します。

<code class="js">
$.imgPreloader=function(url,eventLists){
var img=new Image();
var $img=$(img);
img.src=url;
$.each(eventLists,function(type,fn){
$img.bind(type,fn);
});
$img.trigger(img.complete?'load':'begin');
return $img;
};</code>

感知エリアを再計算します:

小さい画像が配置されている検出領域の 4 辺から、インジケータ ボックスの 4 つの辺のそれぞれのサイズの 1/2 を引いた長方形の外側の領域が、大きな画像の境界に表示されます。 :

<code class="js">
var borderLeft =thumbInfo.left+tipboxInfo.width/2;
var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width);
</code>

大きな画像を背景画像として使用することによって発生する問題:

非表示の前景画像をプリロードに使用します。ロード イベントによってタイミングが決まります。つまり、クロムは正常です。FF は画像を 2 回要求しました。画像はキャッシュされません。

もう 1 つの方法は、大きな画像をプリロードしないことです。大きな画像の位置にオーバーレイを直接「読み込む」に変更したところ、Chromeでは画像が徐々に読み込まれていくように見えますが、Chromeでは直接表示されるのが少し残念です。

大きな画像を前景画像として使用した最終結果:

利点は、大きなイメージのロード イベントとエラー イベントの両方が正常に動作できることです。

<code class="js">
$.imgPreloader($anchor.attr('href'),{
load:function(){
isImageReady=true;
$o.empty().append(this);
setTimeout(autoFitPicture,0);
},
begin:function(){
$o.text('loading...');
},
error:function(){
isImageReady=true;
$o.text('invalid picture!');
}
});</code>

大きい画像のプリロードのロードイベントと小さい画像のmousemoveイベントの間の非同期の解決策: マウス座標をリアルタイムで保存し、プロンプトボックスの配置方法とプロンプトボックスの配置方法を分離します。大きな画像。

<code class="js">
  //鼠标位置存储
var mouseInfo={x:0,y:0};
//指示框定位
var setTipboxPosition=function(e){
mouseInfo.x=e.pageX;
mouseInfo.y=e.pageY;
$tipbox.css({
top:mouseInfo.y<thumbInfo.width/2+thumbInfo.top
?Math.max(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top)
:Math.min(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top+thumbInfo.height-tipboxInfo.height),
left:mouseInfo.x<thumbInfo.width/2+thumbInfo.left
?Math.max(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left)
:Math.min(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left+thumbInfo.width-tipboxInfo.width)
});
setImgPosition();
};</code>

ちょっと余談ですが、ブラウザをお持ちなら幸運かもしれません。
デモ コード
パッケージのダウンロード http://www.jb51.net/jiaoben/22866.html