0
ズーム機能をmousemoveに表示しないようにしたいが、ページが読み込まれるとすぐに「zoom.fadeIn」を一番上に近づけてみましたが、画像はその中にセンタリングされます。どんな勧告？は、ロード時にマウス移動機能をトリガーする必要があります
sym.$('.zoom_area').css({
});
sym.$('.zoom').css({
'box-shadow':'0 0 0 0px rgba(255,255,255,0.85),0 0 0px 0px rgba(20,20,20,0.25), inset 0 0 40px 2px rgba(20,20,20,.25)',
'position':'absolute',
'display':'none'
});
sym.$('.zoom_area').each(function() {
// find the element in the dom that have the zoom class
var zoom = $(this).find('.zoom');
// the big image is the background of the loop.
var zoom_on = $(this).find('.zImage');
// load the actual image in the loop
var image = new Image();
image.src = zoom_on.attr('src');
zoom.css({background: "url('"+$(this).find('.zImage').attr('src')+"')no-repeat"});
// the top left of element compare to the page.
var offset = $(this).offset();
// gets the coordinate of the mouse compare to the image on the stage
$(this).mousemove(function (e) {
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
// if the mouse enters the image fade in the zoom
if (x > 0 && x < $(this).width() && y > 0 && y < $(this).height()){
zoom.fadeIn(250);
}
else //fade out the zoom when it leaves
{
zoom.fadeOut(250);
}
// center the mouse in the zoom
// calculate the ratio of the image compare to the original image - center it.
var rx = -Math.round(image.width/zoom_on.width()*x- zoom.width()/2);
var ry = -Math.round(image.height/zoom_on.height()*y- zoom.height()/2);
zoom.css({
left: (x-zoom.width()/2) + "px",
top: (y-zoom.height()/2) + "px",
backgroundPosition: (rx) +"px " + (ry) + "px"
});
});
});
スクリプトが既にロードされています.pageY - offset.top; //マウスがズームの画像フェードに入った場合 （x> 0 && x <$ this）.width（）&& y> 0 && y <$ this（this）.height （））{ zoom.fadeIn（250）;} 他//それが {zoom.fadeOut（250）; }離れるときズームをフェードアウト を}）。 – bjmyoung
があなたのために答えを更新しました。 – ilai