Question

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

^带有石样的表格是有问题的元素。

我怎么会去描述这个，所以我可以找到一个javascript / jquery替代品，以便它可以轻松编辑。

如果有人有任何相似之处，请传递链接......

非常感谢。

Answer 1

我可以告诉你有可能做类似的事情，我认为你不会找到一个开箱即用的插件来为你处理一切。

你必须有一个包含所有瓷砖的div网格。

将每个div（每个图块）挂钩到mouseover，mouseout和click事件。
点击hide /从主网格中删除元素
在选择中显示。

我认为最好在没有任何动画的情况下完成整个事情。

然后你可以添加动画效果，让它看起来更好看。查看JQuery的animate和JQueryUI animation，了解鼠标效果。

<强>更新完成创建客户端行为（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上时，tile图像应该缩小，使用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回退。

我想把我页面上的这个flash元素变成javascript / jquery ......？

2 个答案: