jquery_jquery に基づく虫眼鏡効果

コア コード:

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

$(function(){
var MouseX = 0; //マウスの移動の位置 Bottom
var markLeft = 0 //虫眼鏡の移動の左の距離
var markTop = 0;虫眼鏡の移動
var perX = 0; //X 移動の割合
var perY = 0; //移動した Y の割合
var bigLeft = 0; //全体像が左に移動する必要がある距離
var bigTop = 0; //大きな画像が上に移動する必要がある距離
//虫眼鏡の位置を変更します
function updataMark($mark){
//判断により、小さい画像はフレームは小さな画像領域内でのみ移動できます
if(markLeftmarkLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft>}

if(markTop<0){
markTop = 0;
}else if(markTop> maxTop){
markTop = maxTop;
//虫眼鏡の比率、つまり領域内のこの小さなボックスの移動比率
perX = markLeft/$(".small").outerWidth ();
perY = markTop/$(".small) ").outerHeight();
bigLeft = -perX*$(".big").outerWidth();
bigTop = -perY* $(".big").outerHeight();
//小さなボックスの位置を設定します
$mark.css({"left":markLeft,"top":markTop,"display":"block "});全体像の位置
function updataBig(){
$(".big").css({"display":"block","left ":bigLeft,"top":bigTop});
}
//マウスが外に出たとき
function cancle(){
$(".big").css({"display": "none"}); (".mark").css({"display":"none"});
}
//サムネイル上でマウスが移動したとき
function imgMouseMove (event){
var $ this = $(this);
var $mark = $(this).children(".mark");
//小さな画像上のマウスの位置
MouseX = events.pageX- $this.offset().left - $mark.outerWidth()/2;
mouseY = events.pageY-$this.offset().top - $mark.outerHeight()/2 ;最大値
maxLeft =$this.width()- $mark.outerWidth();
maxTop =$this.height()- $mark.outerHeight(); markTop = マウスY;
updataBig();

$(".small").bind("mousemove", imgMouseMove) Mouseleave",cancle);
})



これには 2 つの主要なポイントがあります


1. 全体像を追跡する方法


実際には、「虫眼鏡」がどのくらい移動するかについては、比例関係が使用されます (特定の値ではなく、比率です)。 、大きな画像もこれを同時に使用し、大きな画像の幅と高さを乗算することで、大きな画像をどのくらい移動するかを計算できます。表示領域と虫眼鏡の関係は？


ここでの「虫眼鏡」は、大きい画像の表示領域に比例し、大きい画像と小さい画像も同じ比例関係にある必要があります。たとえば、大きい画像と小さい画像の比率は 1:2 で、「虫眼鏡」領域のサイズも大きい画像が表示される領域のサイズと 1:2 でなければなりません。 「虫眼鏡」でカバーされる小さな画像領域は、大きな画像とは異なります。表示領域と表示される画像情報は一致しません。 (Miaowei Classroom で説明されている例は一貫性がありません);

オンライン デモ:
http://demo.jb51.net/js/2012/mymagnifier/

パッケージのダウンロード:
http://www.jb51.net/jiaoben/45315.html