検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Jqueryプラグインをベースに開発された画像拡大鏡エフェクト(淘宝網模倣)_jquery

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

WBOY
WBOYオリジナル
2016-05-16 17:59:241297ブラウズ

要件: 会社の特定の 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"
});
ＨＨＴＭＬ コードをコピー

コードは次のとおりです



div>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jquery_jquery に基づく js ページング パッケージ次の記事：jquery_jquery に基づく js ページング パッケージ

関連記事

続きを見る