2013-02-17 2 views
2

Я создал веб-приложение, которое масштабируется до мобильной версии с использованием запросов CSS @media.jQuery: Как заставить DIV соскользнуть с экрана, а другой - вставить?

Я хотел бы иметь кнопку для переключения между двумя основными содержимым, отображающими DIV.

При загрузке страницы с помощью @media запросов, другой получает скрыта с помощью display: none;

Когда кнопка нажата, я хочу, чтобы показать и видимые один, чтобы скрыть, что я в настоящее время уже сделан.

Но я хотел бы анимировать этот процесс, который я хотел бы работать плавно на мобильных устройствах.

Но я не могу понять, как jquerymobile делает это уже, что прекрасно работает.

Что мне нужно сделать, чтобы панель (div) соскользнула с левой стороны, а другая, чтобы скользить справа, как mobilejquery, используя немобильный jquery?

Пример: http://m.stanford.edu/ Здесь при щелчке элемента списка, он соскользнет и еще один скользит в

Спасибо..

+0

Это довольно легко, если вы одновременно загружаете содержимое обоих DIV. Тогда у вас может быть контейнер DIV, который имеет свойства 'overflow: hidden' и' position: relative'. Внутри этого контейнера у вас будет «viewport» DIV, который будет иметь свойство 'position: absolute'. Вы разместили два DIV-файла контента в области области просмотра, и всякий раз, когда вы хотите перейти на другой контент, просто используйте метод 'animate()' jQuery для видового экрана DIV. – kjetilh

+0

Привет @kjetilh. Спасибо за ваш комментарий, я очень благодарен за объяснение. Однако я не думаю, что это сработает, потому что .animate() на самом деле не поддерживается аппаратным обеспечением, а все мобильные jQuery анимации для слайдов панели являются гладкими благодаря ускорению? – Phil

+0

Я не уверен, как это работает с jQuery mobile, но другая возможность - это, возможно, переходы CSS3, которые должны обеспечивать лучшую производительность, но они вряд ли поддерживаются как эффекты jQuery (совместимы с кросс-браузером). Не уверен, о чем вы говорите, когда говорите «ускорение». Разве не имеет смысла, что jQuery Mobile использует анимацию jQuery? : p – kjetilh

ответ

9

основная функция, которая может помочь вам сделать аппаратное ускорение анимации с использованием HTML5/CSS/JavaScript является правилом -webkit-transform: translate3d CSS, что переводит горизонтальную (х) положение Слайды к левой или правой:

translate3d (x, y, z), translateZ (z)

Переместить элемент в x, y и z и просто переместить элемент в z. Положительный z направлен на зрителя. В отличие от x и y, значение z не может быть процентным.

Следуйте за этим отличным tutorial, который показывает вам, как показывать полные экраны на любом мобильном устройстве, используя вышеуказанную функцию вместе с javascript.

Для дальнейшего обсуждения аппаратного ускорения с помощью html5 см. Статью this.

+0

+1 для учебника и ссылок .. :) :) – bipen

+0

эй спасибо мужчина :) – abbood