2013-10-05 3 views
0

먼저 확인 Jmpress.js 응답 기능 //, 워드 프로세서 :Codrops - 기능 및 방법 모두의

플러그인 사이트 : http://jmpressjs.github.io/jmpress.js/

Codrops 기사 : http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/

Codrops 데모 : http://tympanus.net/Tutorials/SlideshowJmpress/

이제 슬라이더의 내용이 매우 비례하고 반응적인 방식으로 "적응"되는 방식을 이해할 수 있도록 브라우저 크기 (너비 만)의 크기를 조정하도록 요청할 것입니다.

질문 : 만약 미안 해요이 달성 방법을 알고 싶어요 (내가 Pixedelic의 Camera 플러그인에 쉽게 통합 할 수있는 경우, BTW, 그리고 ...이 것이 바로 플러스)

얘들 보면, 그 cuuation은 "드문"입니다. 저는 매우 프론트 엔드지만 jQuery, 아마도 언젠가는 AngularJS와 함께하려고합니다 ... 어쨌든, 그 질문을 설명합니다.

@ media 쿼리를 사용하는 다른 방법은 있지만 Jmpress.js가 처리하는 방식이 정말 유용하고 흥미 롭습니다. RedGlobe 지적한 바와 같이 미리

+0

그것은 슬라이드의 내용을 소요 div에서 그것을 포함하고 전체 슬라이드에 웹킷 변환을 적용합니다. 이 솔루션을 다시 개발하거나 Wordpress 사이트에 jmpress를 구현하려고합니까? 아니면 당신의 질문은 단지 이론과 학습에 대한 호기심의 문제입니까? – RedGlobe

+0

오 대단하다! 따라서 jQuery 솔루션이 아니라 단순히 CSS3 변환을 사용합니다. 그래서 아는 것이 있습니다 ... 사실상 해결책은 바로 하위 호환이 아닙니다. 질문은 호기심과 학습을위한 것입니다.하지만이 변환을 카메라라는 jQuery 플러그인에 구현하고 싶습니다. 실제로 크기를 변경하는 것이 무엇인지 알지 못합니다. 이해해야합니다. 고마워요! –

답변

1

용액에

덕분 간단한 CSS3의 변환이다.

이들은 전체 컨테이너에 적용되며 모든 것은 단순히 비율로 조정됩니다.

나는 요소를 확장하기 위해 CSS 코드를 떠날 것이다 : 당신은 매트릭스 변환을 사용할 수 있습니다 IE8 지원에 대한

.box_scale { 
    -webkit-transform: scale(0.8); /* Chrome, Safari 3.1+ */ 
    -moz-transform: scale(0.8); /* Firefox 3.5+ */ 
     -ms-transform: scale(0.8); /* IE 9 */ 
     -o-transform: scale(0.8); /* Opera 10.50-12.00 */ 
      transform: scale(0.8); /* Firefox 16+, IE 10+, Opera 12.10+ */ 
} 

합니다. (더 많은 것 : http://peterned.home.xs4all.nl/matrices/)

어리석은 질문을 위해 유감스러운, 그러나 중대한 방법이고 나는 그것을 몰랐다. 희망이 다른 사람을 돕는