JQuery와 화면 브라우저

내가

<table> 
    <tr> 
     <td><img class='source-img' src='a.png' ></td> 
     20 more same TDs 
    </tr> 
     20 more TRs 
    </table> 

<div id="magnifier" style="position:absolute;"></div>

1 줌이 성공적으로 완료 사진의 줌 효과를 만드는 오전

의 (위치) 돋보기의 왼쪽 2 상단/난에 돋보기의 방향이되는 문제 있다

$("source-img").mousenter(function(){ 
    $("#magnifier").css({ 
    top: $(this).top, 
    left:$(this).offset().left()+$(this).width()+5//to improve left value 
    }); 
});

문제로 소스 IMG의 오른쪽 : 소스 - IMG는 왼쪽에 대한 BCZ 지금은 소스 IMG와 그 반대의 오른쪽에 돋보기를 표시하려면 다음 브라우저의 가장 왼쪽 측면에있는 경우 대부분의 source-img 돋보기가 표시되지만 보지 마라.

출처

2012-10-10 Anonymous

돋보기 요소의 위치와 창 너비에 대한 너비를 테스트하고 이에 따라 왼쪽 위치를 조정해야합니다. 아래의 의사 코드는 당신을 도울 것입니다.

$(".source-img").mouseenter(function(e) { 
    var w = $(window), 
     elWidth = $(this).width(), 
     offset = $(this).offset(), 
     left; 

    if (elWidth + e.pageX > w.width() + w.scrollLeft()) { 
     left = e.pageX - elWidth; 
    } else { 
     left = e.pageX; 
    } 

    $("#magnifier").css({ 
     top: offset.top, 
     left: left 
    }); 
});

추가 설정을 사용하여 돋보기가 필요한 경우 가장자리에서 멀리 떨어지게 할 수 있습니다.

출처

2012-10-10 04:15:09 Lafinboy

JQuery와 화면 브라우저

답변

관련 문제