Question

我希望缩放功能不仅仅出现在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"
});
});
});

Answer 1

您可以在onload的{{1}}上使用body。

HTML

在页面加载函数时放置要运行的代码，并在上面给出的示例中调用此函数而不是<body onload="script()">。

需要在加载时触发鼠标移动功能

1 个答案: