2016-05-22 4 views
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" 
}); 
}); 
}); 

ответ

0

Вы можете использовать onload на body вашего HTML.

<body onload="script()"> 

поставить код, который вы хотите запустить при загрузке страницы в функции, и вызвать эту функцию вместо script() в примере я дал выше.

+0

Сценарий уже загружается, хотя это событие вызывает только после перемещения мыши - $ (это) .mousemove (функция (е) { вар х = e.pageX - offset.left; вар у = е .pageY - offset.top; // Если мышь входит в изображение, исчезает при масштабировании if (x> 0 && x <$ (this) .width() && y> 0 && y <$ (this) .height()) { zoom.fadeIn (250); } еще // затухать трансфокатора, когда он покидает { zoom.fadeOut (250); } }); – bjmyoung

+0

обновил ответ для вас. – ilai

Смежные вопросы