Я хочу превратить этот flash-элемент на моей странице в javascript / jquery ...?

Question

http://floorsofstone.com/sample-request/

^ Элементом является таблица с образцами камня.

Как мне вообще описать это, чтобы я мог найти альтернативу javascript / jquery, чтобы сделать ее легко редактируемой.

Если у кого-нибудь есть что-нибудь подобное, перейдите по ссылке ...

Большое спасибо.

Answer 1

Я мог бы сказать вам, что можно сделать что-то подобное, я не думаю, что вы найдете готовый плагин, который будет обрабатывать все для вас.

Вы должны иметь сетку div со всеми вашими плитками.

• Подключите каждый из div'ов (за плитку) к наведению мыши, mouseout и click events.
• При нажатии скрыть / удалить элемент из основной сетки
• Показать в выделении.

Я думаю, что было бы лучше, если бы сначала все делали без анимации.

Затем вы можете добавить анимированные эффекты, чтобы все выглядело лучше. Посмотрите на анимацию JQuery animate и JQueryUI , чтобы увидеть эффекты мышки над

Обновление: Как только вы закончите создание вашего поведения клиента (selection..et) и анимации. Затем вы можете подключить все это к вашему серверу с помощью jquery.ajax ()

Я проверил, как работает эта страница. При отправке он загружает форму для некоторых деталей и отправляет данные по этому адресу: http://floorsofstone.com/sample-request/post-data.aspx

Всплывающее диалоговое окно также содержит скрытые поля с выбранными TileID, что-то вроде этого:

<input id="TileIDs" type="hidden" value="4005,4004,4003,4002," name="TileIDs">
<input id="Tile1" type="hidden" value="Adobe Quarry Tile" name="Tile1"> 
<input.....

Так что ваш jquery при отправке будет выглядеть примерно так:

$.ajax({
  type: "POST",
  url: "/sample-request/post-data.aspx",
  data:"TileIDs=" + $("#TileIDs").val() + "&ClientName=" + $("#ClientName").val()
  //the "TileIDs"= is the name your server expects and 
  //#TileID is the id of the html field that contains the value 
  }).done(function( msg ) 
     {
      alert( "Data Saved: " + msg );
     });

Answer 2

Лично я бы не использовал для этого javascript или jquery.

Я бы пошел с переходами CSS3.Когда вы наводите курсор мыши на элемент div, изображение тайла должно уменьшаться с переходами css3, мы можем сделать это анимированным образом.

HTML

<div class="tile">
  <span>sometext</span>
  <img src="tile-1.jpg">
</div>

CSS

.tile {
  width: 100px;
  height: 100px;
}

.tile img {
  width: 100px;
  height: 100px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.tile:hover img {
  width: 80px;
  height: 80px;
}

ПРИМЕЧАНИЕ. Я не проверял это, но думаю, что все должно быть в порядке.

ПРИМЕЧАНИЕ 2. Это не работает в IE 9 и ниже.В этом примере я лично не возражаю, что у IE нет хорошего перехода.Если вам действительно нужно, протестируйте переходы css3 с помощью Modernizr и предоставьте откат jquery.