특정 좌표, 비율로 이미지에 고정 된 이미지?

나는 특정 장소에서 마우스를 가져 가면이 공간의 절대 위치에 다른 이미지를 추가하는 내 웹 사이트에 이미지를 저장할 수있었습니다.특정 좌표, 비율로 이미지에 고정 된 이미지?

유일한 문제는 내가하는 경우는 다음과 같습니다

여기

가이 공간에 마우스를 가져 가면 후 같은 모습입니다 : 여기

는 전에 같은 모습입니다 작은 너비로 창 크기를 조정하면 이미지가 더 넓은 너비에 배치되지 않습니다.

이미지에서 볼 수 있듯이 이미지가 겹쳐서 보입니다.

$(function() { 
$(".mycinetik-image").find("img").mousemove(function(e) { 
    var offset = $(this).offset(); 
    var relativeX = (e.pageX - offset.left); 
    var relativeY = (e.pageY - offset.top); 
    var taillePhotoX = $(this).outerWidth(); 
    var taillePhotoY = $(this).outerHeight(); 
    var widthImage1 = (taillePhotoX/1.591) - (taillePhotoX/8); 
    var widthImage2 = (taillePhotoX/2.683) - (taillePhotoX/8.7); 
    var heightImage1 = (taillePhotoY/1.56) - (taillePhotoY/24.84); 
    var heightImage2 = (taillePhotoY/1.067) - (taillePhotoY/1.56); 
    if((relativeX >= taillePhotoX/7) && (relativeX <= taillePhotoX/1.6) && (relativeY <= taillePhotoY/1.59) && (relativeY >= taillePhotoY/13.1)){ 
    appendImgMyCinetik (1, taillePhotoX/7.75, taillePhotoY/23, widthImage1, heightImage1); 
    } 
    else if((relativeX >= taillePhotoX/7) && (relativeX <= taillePhotoX/2.5) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){ 
    appendImgMyCinetik (2, taillePhotoX/7.5, taillePhotoY/1.56, widthImage2, heightImage2); 
    } 
    else if((relativeX >= taillePhotoX/2.5) && (relativeX <= taillePhotoX/1.6) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){ 
    appendImgMyCinetik (3, taillePhotoX/2.6, taillePhotoY/1.56, widthImage2, heightImage2); 
    } 
    else if((relativeX >= taillePhotoX/1.55) && (relativeX <= taillePhotoX/1.01) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){ 
    appendImgMyCinetik (4, taillePhotoX/1.586, taillePhotoY/1.56, widthImage2, heightImage2); 
    } 
    else if((relativeX >= taillePhotoX/1.6) && (relativeX <= taillePhotoX/1.01) && (relativeY <= taillePhotoY/1.59) && (relativeY >= taillePhotoY/13.1)){ 
    appendImgMyCinetik (5, taillePhotoX/1.586, taillePhotoY/20, widthImage2, heightImage1); 
    } 
}); 
}); 

function appendImgMyCinetik (nb, x, y, imgWidth, imgHeight){ 
if(nb == 1 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="1" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart1.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#1").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 2 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="2" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart2.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#2").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 3 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="3" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart3.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#3").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 4 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="4" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart4.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#4").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 5 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="5" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart5.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#5").animate({ 
     opacity:1 
    }, 500); 
} 
}

내가 화면 너비로 이미지 크기를 적용하는 비율을 사용하지만 이상하게, 작은 내 방 창문 폭이 크면 클수록 지나쳐가 : 여기

내가 구현 된 스크립트입니다.

의견이 있으십니까?

출처

2016-06-02 Baptiste Arnaud

모든 코드가 포함 된 바이올린 또는 스 니펫을 추가하십시오. 네가 원하는 것은 분명하지 않다. –

난 그냥 할 수 없어 ... 그것은 거대한 프로젝트이다 –

또한 문제의 자세한 내용을하시기 바랍니다. –

이 작은 정보로는 대답하기가 어렵습니다. 당신은 이미지 크기를 적용하는 비율을 사용하는 것이 언급,하지만 기능은 픽셀

'width:'+ imgWidth +'px;'

나는 당신이 폭 값을 할당하는 볼에 고정 된 크기를 사용하고 있습니다 :

var taillePhotoX = $(this).outerWidth();

하지만이 아니다 창 크기에 비례하여 그것은 이미지에 따라 다르며 다른 윈도우에서 일정합니다.

당신은 사용할 수 있습니다

var taillePhotoX = $(window).width() // * (times) proportion ratio calculation;

브라우저 창에이 상대하려면.

또한 이미지 수가 겹치지 만 (코드는 5 만 고려함) 클래스를 사용하여 전환을 비롯한 다양한 화면 크기에서 표시되는 방식을 정의 할 수 있습니다. 그런 다음 적절하게 적절한 클래스를 할당하는 기능을 갖습니다.

출처

2016-06-02 15:42:26 Buffalo

미디어 쿼리가있는 클래스에 대해 생각하지 않았습니다! 고마워. –

특정 좌표, 비율로 이미지에 고정 된 이미지?

답변

관련 문제