проблемы с использованием jquery для масштабирования и панорамирования карты изображений - PullRequest
Новая
       10

проблемы с использованием jquery для масштабирования и панорамирования карты изображений

0 голосов
/ 17 сентября 2010

~ Я работаю над этим некоторое время (много месяцев !!) - использую jquery для масштабирования и панорамирования карты изображений - что немного выходит за рамки моего текущего уровня навыков, поэтому я взволнован тем, что у меня есть далеко зашло !! ~ но функциональность не так гладкая, как должна быть (увеличение и уменьшение масштаба должно быть более плавным) - и есть некоторые более серьезные проблемы при просмотре в IE7.

Вот это на веб-странице: http://www.agencydr.squarespace.com/locations

Ниже приведен jquery. Кто-нибудь замечает что-нибудь, что я должен изменить? 

/* ************************************** */
/* locations map */
/* ************************************** */
$('#modulePage6955407 #sectionContent3019160').insertAfter("#pageHeaderWrapper");
$('#modulePage6955407 #bannerAreaWrapper').animate({"top": "+=250px"}, "slow");
$('#modulePage6955407 #sectionContent3019160').animate({"height": "290px"}, "slow");
$('#modulePage6955407 #sectionContent3019160').animate({"opacity": "1"}, "slow");

$('#LocationsMapWrapper').hover(function() {
   $('#LocationsMapWrapper #MapImage').animate({
      width: 600,
      height: 375,
      marginLeft: 550,
      marginTop: -20
   }, "slow", "easeOutQuad");
 },
 function() {
   $('#LocationsMapWrapper #MapImage').animate({
      width: 478, 
      height: 265, 
      marginLeft: 480, 
      marginTop: 0
   }, "slow", "easeOutQuad");

}).mousemove(function(e){
    $("#LocationsMapWrapper #MapImage").each(function(){
        var position = $(this).offset();
        var position_x = position.left;
        var position_y = position.top;
        position_x = 0;
        position_y = 0;
        var windowwidth = ($(window).width()/2);
        var windowheight = ($("#LocationsMapWrapper").height()/2);
        var endX = (windowwidth)-(e.pageX);
        var endY = (windowheight)-(e.pageY);
        var speed = 5;
        position_x += (endX-position_x)/speed;
        position_y += (endY-position_y)/speed;
        $(this).css({'position': 'relative'});
        $(this).css({'left':position_x});
        $(this).css({'top':position_y});
   }); 
}).mouseleave(function(){
   $("#LocationsMapWrapper #MapImage").each(function(){
        $(this).css({'left':0});
        $(this).css({'top':0});
   }); 
});

и вот некоторые соответствующие CSS: 

/* locations map */
#sectionContent3019160 { width: 100%; height: 0px; margin: auto; opacity: 0.15; margin-bottom: 10px; z-index: 1; overflow: hidden; }
#sectionContent3019160 { margin-top: -48px; } /* up */

#LocationsMapWrapper { width: 1020px; height: 355px; margin: auto; }
#LocationsMapWrapper #MapImage { width: 478px; height: 265px; margin-left: 480px; }

Любая помощь приветствуется! Я перепробовал все, что мог придумать, чтобы это работало более плавно, но я в растерянности. Обратите внимание, что я использую размещенную службу CMS, поэтому мне нужно изменить несколько установленный HTML-макет.

UPDATE: Вот мой обновленный код на данный момент: 

$('#LocationsMapWrapper').hover(function() {
   $('#LocationsMapWrapper #MapImage').stop().animate({ 
      width: 600,
      height: 375,
      marginLeft: 550,
      marginTop: -20
   }, "slow", "easeOutQuad").mousemove(function(e){
        var position = $(this).offset();
        var position_x = position.left;
        var position_y = position.top;
        position_x = 0;
        position_y = 0;
        var windowwidth = ($(window).width()/2);
        var windowheight = ($("#LocationsMapWrapper").height()/2);
        var endX = (windowwidth)-(e.pageX);
        var endY = (windowheight)-(e.pageY);
        var speed = 5;
        position_x += (endX-position_x)/speed;
        position_y += (endY-position_y)/speed;
        $(this).css({'position': 'relative'});
        $(this).css({'left':position_x});
        $(this).css({'top':position_y});
   });         
}, function() {
   $('#LocationsMapWrapper #MapImage').stop().animate({ 
      width: 478, 
      height: 290, 
      marginLeft: 480, 
      marginTop: 0,
      left: 0,
      top: 0
   }, "slow", "easeOutQuad");
});

1 Ответ

0 голосов
/ 17 сентября 2010

Только когда мышь неподвижно над изображением, вы хотите увеличить его.Вы не хотите, чтобы изображение уменьшалось просто от случайного контакта с мышью.

Я бы предложил запустить таймер, когда указатель мыши находится над изображением, который вызывает функцию масштабирования примерно через 250-500 мс, при условии, что мышь не переместилась более чем на заданное пороговое расстояние в этом интервале.Если мышь перемещается на расстояние, превышающее ваше пороговое расстояние (редактировать: пока он остается на изображении или удаляется с изображения), отключите таймер, чтобы увеличение не происходило.

...