Jquery WordPress Анимация - PullRequest
       0

Jquery WordPress Анимация

1 голос
/ 02 ноября 2011

В настоящее время я делаю проект загрузки дневниковых записей поездки в WordPress.

Мне интересно, есть ли способ с jQuery / JavaScript / php, чтобы иметь временную шкалу, где изображениеЛодка движется по временной шкале в зависимости от того, какие сообщения вы читаете.

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

Ответы [ 3 ]

0 голосов
/ 02 ноября 2011

Это определенно было бы индивидуальное решение, которое вам нужно было бы сделать, и не столько вопрос, на который здесь есть базовый ответ.

Однако, если это поможет, вы можете начать с категоризации сообщений обычным способом - или пометить их. WP позволяет оба. Поскольку мы не знаем, как вы используете сайт, давайте перейдем к тегам.

Не думаю, что у меня есть время написать полный синтаксис WP здесь, тем более что у них есть документация, которой легко следовать. Вот основная идея, хотя -

при загрузке страницы, получить сообщения с общим тегом и запустить цикл ...

$total = 0;
$position = 0;
$i = 0;
$this_id = $whatever_current_id_is;
while($the_tag_result_loop)
{
    $total ++;
    $the_id = get_the_ID();
    if($this_id == $the_id)
    {
        $position = $i;
    }
    $i ++;
}

Затем в конце этого ужасно неэффективного цикла вы можете разделить область временной шкалы на переменную $ total, чтобы получить объем пространства, которое должна представлять каждая страница. Допустим, ваша область экрана или «озеро» имеет ширину 1000 пикселей.

$each_gets = 1000 / $total;

Затем умножьте переменную $ position на $ each_gets, чтобы найти левое поле.

$left_margin = $each_gets * $position;

Тогда, конечно, примените это к рассматриваемому элементу.

<div id="boat" style="margin-left:<?php echo $left_margin; ?>px"></div>

Имейте в виду, что это не решение для копирования / вставки или что-либо еще. Это просто точка в направлении А, не обязательно лучшая.

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

0 голосов
/ 02 ноября 2011

Вам потребуются две важные части информации: общее количество постов и позиция текущего поста в заказе. Этот второй может быть хитрее. Может быть, запросить базу данных, чтобы получить количество сообщений до или после текущего и вычесть из общего числа.

Имея эти биты информации в руках, масштабируйте их до 0 - 100 процентного значения:

$precent = ($position / $totalCount) * 100;

тогда ваши CSS и HTML могут выглядеть примерно так:

<style type="text/css">
    #boat-progress { position:relative;height:40px;margin-right:100px;overflow:visible; }
    #boat-progress img { position:absolute;top:0;left:0; }
</style>
<div id="boat-progress">
    <img src="boat.png" alt="Boat" style="left:<?php=$percent ?>%;" />
</div>

Я поместил это "margin-right" там, потому что, когда изображение на 100%, оно фактически будет от правого края. 100px угадывает изображение, которое может иметь ширину 100px. Смещая родительский div, чтобы учесть это пространство, оно должно работать. Это довольно быстрое и грязное решение.

0 голосов
/ 02 ноября 2011

Это довольно сложный вопрос, лучше всего разбить его на части.Вот довольно высокоуровневое описание того, что должно быть сделано.

Чтобы анимировать между двумя точками, представляющими страницы, вам необходимо знать, на какой странице ранее был пользователь.Возможно, вы можете сделать это, сохранив текущую страницу в сеансе пользователя, или, возможно, посмотрев реферер HTTP.

Как только вы получите эту информацию, вам просто нужно анимировать положение предыдущей страницы на временной шкале.и текущий.jquery делает это легко.

$ ('# boat'). animate ({'left', '100px');

Вам необходимо знать, как далеко друг от друга находятся ваши маркеры (возможно 5 пикселей на страницу), и расположить лодку на маркере предыдущей страницы при загрузке страницы (сделайте это с PHP, так как PHP знает о предыдущей странице).Затем при загрузке страницы используйте вышеуказанные js для перехода на новую позицию.

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