jQuery를 사용하여 뷰포트에서 객체를 가로로 가운데 맞추는 방법?

Question

나는 이것이 전에 물었던 것을 안다. 그러나 나의 상황은 다소 이상하다. .. 별난. 나중에 웹 사이트의 슬라이드 쇼 요소에 사용할 iframe을 작성 중입니다.

나는 화면을 넘어 길을 간다 긴 내용 적응 인 flexbox을하고 난 수평으로

left:50%; 
transform:translateX(-50%); 

의 CSS 트릭을 사용하고자하는 페이지의 현재보고 지역을 중심으로, 그래서 때를 창 크기를 조정하십시오. 현재 의 중간을 보았습니다. 요소는 화면 중간에 여전히 수평으로 유지됩니다.

내 flexbox는 콘텐츠 적응 형이므로 길이가 5K px이므로 css %를 사용할 수 없습니다. 그래서 저는 jQuery에 가서 $(window).width()을 사용하여 현재 뷰포트 크기를 결정하고 .css({}) 메소드로 요소를 조정했습니다. 다음은 jQuery 코드입니다.

$(document).ready(function(){ 
$(window).resize(function(){ 
var winWidthHalf = ($(window).width())/2; 
$("#ss_home").css({ 
"left":"-"+winWidthHalf+"px", 
"-webkit-transform":"translateX("+winWidthHalf+"px)" 
}); 
}); 
}); 

다음은 퍼즐입니다. 그런 다음 PC를 다시 시작한 이후로는 작동하지 않았습니다. 내가 한 짓은 다 도움이되지 않았다. 도울 수 있니? 나는 무슨 일이 있었는지 전혀 모른다. ... 여기에 페이지 미리보기가있다. 코드에있는 다른 주석은 신경 쓰지 않아도된다. 지금은 관련이 없다 : http://users.metropolia.fi/~staniss/test/slideshow/

모든 내용은 샘플 일 뿐이다.

$(document).ready과 $(window).resize을 그룹화하는 방법을 알고 싶습니다. 동일한 코드를 실행하기 때문에 두 번 붙여 넣기를 복사하지 않으려 고합니다. 나쁜 행동이기 때문에 이벤트를 변경하기 위해 두 번 붙여 넣기를하고 싶지는 않습니다. 나는 이것에 대한 올바른 구문을 찾을 수 없었습니다.

또한 죄송합니다. 샘플은 Chrome 전용이므로 dev에 매우 초기이므로 아직 호환성 문제는 없습니다.

Answer 1

브라우저 공급 업체 확장 문제 (변환 할 -webkit- 접두사를 추가해야 함) : P.