Jqueryプラグインをベースに開発された画像拡大鏡エフェクト(淘宝網模倣)

要件: 会社の特定の Web サイトでは、画像プレビュー効果を実現し、淘宝網のような部分拡大を実現できる必要があります。

感想: 開発スピードを考えるなら、まずインターネット上にある既成のコードを使うことを考えましょう！しかし、大まかに検索した結果、インターネット上で利用できるコードはそれほど多くなく、一部の結果は理想的ではありません。また、一部のコードは自分で書くよりも読み取るほうがコストがかかると推定されるため、jquery プラグインを自分で書くというアイデアを思いつきました。

原則: 最も基本的な原則は、小さい画像と大きい画像の 2 つの画像を用意することです。まず、小さい画像上のマウスの座標を取得し、次に div を使用して大きい画像を表示します。小さな画像の座標に応じて、その座標に大きな画像を乗算し、小さな画像で除算して、複数の位置を取得します。当初は北面を繰り返さずに大きな画像を並べて配置し、背景のposition属性で配置することで理想的な効果を得ることができましたが、IE6では画像がちらつくため、表示するように変更しました。画像の絶対位置決めモード！

レンダリング:

コード:

コードをコピーコードは次のとおりです:

/*
*
* JQUERY の簡易虫眼鏡プラグイン JNMagnifier
* 著者:翼の初心
* QQ:4585839
* 日付:2011-11-16
*
*/
( function($){
$.fn.JNMagnifier=function(setting){
if(setting&&setting.renderTo){
if(typeof(setting.renderTo)== string"){
settings.renderTo = $(setting.renderTo);
}
}else{
return;
}
var _img_org_ = this.children("img" );
_img_org_.css("カーソル","ポインター");
var __h = 0; >var __top = this.offset ().top;
if(this.offsetParent())
{
__left =this.offsetParent().offset().left; .offsetParent().offset( ).top;
}
var _move_y = 0;
var _val_w = (setting.renderTo.width() / 2); 🎜>var _val_h = (setting .renderTo.height() / 2);
_img_org_.mouseover(function(){
setting.renderTo.html('

');
setting.renderTo.show();
var timer = setInterval(function(){
__w = $("#JNMagnifierrenderToImg").width() / _img_org_.width();
__h = $("#JNMagnifierrenderToImg").height() /_img_org_.height();
if(__w>; 0){
clearInterval (タイマー);
}
}); ;
});
_img_org_.mousemove(function(e){
_move_x =0-Math.round((document.documentElement.scrollLeft e.clientX-__left) * __w - _val_w); >_move_y =0-Math.round((document.documentElement.scrollTop e.clientY-__top) * __h - _val_h);
$("#JNMagnifierrenderToImg").css({"left":_move_x "px ", "top":_move_y "px "});
})
}
メソッドの呼び出し:

コードをコピーします

コードは次のとおりです:

$("#ShowPictureBox").JNMagnifier({

renderTo: "#ShowBigPictureBox"
});

ＨＨＴＭＬコードをコピー

コードは次のとおりです