我想將頁面上的Flash元素轉換為javascript / jquery ...？

Question

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

^上面裝有石材樣品的桌子是有問題的元素。

我什至會去描述它，所以我可以找到一個javascript / jquery替代方案以使其易於編輯。

如果有人有相似之處，請通過鏈接...

非常感謝。

Answer 1

我可以告訴您，可以執行類似的操作，但我認為您不會找到一個開箱即用的插件來為您處理所有事情。

您將必須擁有一個包含所有圖塊的div網格。

• 將每個div（每個圖塊）鈎到鼠標懸停，mouseout和click事件上。
• 單擊時，從主網格中隱藏 /刪除元素
• 在選擇中顯示它。

我認為最好在沒有任何動畫的情況下完成整個操作。

然后，您可以添加動畫效果以使其看起來更好。 查看JQuery的動畫和JQueryUI動畫 ，以了解鼠標懸停的效果。

更新：完成創建客戶端行為（selection..et）和動畫的操作。 然后，您可以使用jquery.ajax（）將整個事情掛接到服務器上

我檢查了該頁面的工作方式。 提交后，它將加載一些詳細信息的表單，並將數據發布到以下URL： 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沒有很好的過渡。 如果確實需要，請使用Modernizr測試css3過渡，並提供一個jQuery后備。