2013-05-06 3 views
2

jquery 슬라이드 기능으로 이미지를 확대 할 수 있고 이미지를 드래그 할 수 있다는 배너를 만들고 있습니다.
Jquery Image Slide. 축소

1 가지를 제외하고는 작동이 완벽합니다. 이미지 아래의 슬라이드로 이미지를 확대하면 완벽하게 작동합니다. 원하는 이미지를 드래그 할 수 있습니다. 그러나 슬라이드 기능을 사용하여 다시 축소하려는 경우. 이미지가 위쪽과 왼쪽으로 이동합니다.

이미지는 de div에 있어야합니다. 따라서 이미지를 축소하면 div에 머물러 있어야합니다.

jQuery를 : I가 사용하는 코드

JQuery와의 위에

var previousValueL = 30; 
var previousValueT = 45; 

2 바르. 나는 30과 45를 얻었 기 때문에. 이미지는 30px에서 여백을 남겨두고 45px에서 마진을.니다.

 if (sliderValue < previousValueL) { 
      var l; 
      l = $img.position().left; 
      if (l < 30) l = l + (previousValueL - sliderValue); 
      $img.offset({ 
       left: l 
      }); 
     } 
     previousValueL = sliderValue; 

     if (sliderValue < previousValueT) { 
      var t; 
      t = $img.position().left; 
      if (t < 45) t = t + (previousValueT - sliderValue); 
      $img.offset({ 
       top: t 
      }); 
     } 
     previousValueT = sliderValue; 

이 코드는 축소 한 것입니다.

또한이 예제를 사용할 수 있습니다
http://jsfiddle.net/DennisBetman/tnaGA/

희망 누군가가 나를 도울 수,

데니스.

답변

3

문제 중 하나는 위치를 사용하는 것입니다. Position은 부모를 기준으로 요소의 좌표를 반환합니다. 부모는 자신의 오프셋을 가질 수 있습니다. 따라서 오프셋을 부모와 관련된 좌표로 설정하면 이상한 위치가 발생할 수 있습니다.

코드를 오프셋을 사용하도록 변경했습니다. 즉, 때로는 배경의 일부 검은 색이 표시되도록 이미지의 종류, 크기에 점프 때문에 http://jsfiddle.net/tnaGA/51/

if (sliderValue < previousValueL) { 
     var l; 
     l = $img.position().left; 
     if (l < 30) l = $img.offset().left+ (previousValueL - sliderValue); 
     $img.offset({ 
      left: l 
     }); 
    } 
    previousValueL = sliderValue; 

    if (sliderValue < previousValueT) { 
     var t; 
     t = $img.position().left; 
     if (t < 45) t = $img.offset().top + (previousValueT - sliderValue); 
     $img.offset({ 
      top: t 
     }); 
    } 

나는 아직도 아직 결과처럼 완전하지 않습니다. 나는 그것이 왜 지금 일어나고 있는지 모른다.

+0

예, 검정색 배경이 이상합니다. 그러나 이것은 내가 고마워 할 필요가있는 것입니다. –

+1

당신이'if (t> 45)에서 필요로하는 검은 배경으로 문제를 발견했습니다. { $ img.css ("top", "0px"); } if (l> 30) { $ img.css ("left", "0px"); }' –