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

【问题标题】：I want to turn this flash element on my page into javascript/jquery...?我想把我页面上的这个 flash 元素变成 javascript/jquery...？
【发布时间】：2012-02-13 09:50:27
【问题描述】：

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

^ 上面有石头样品的桌子是有问题的元素。

我什至会如何描述这个，以便我可以找到一个 javascript/jquery 替代方案来使其易于编辑。

如果有人有类似的，请把链接传递给...

非常感谢。

【问题讨论】：

标签： javascript jquery flash

【解决方案1】：

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

您必须有一个包含所有图块的 div 网格。

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

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

然后您可以添加动画效果以使其看起来更好。查看 JQuery 的 animate 和 JQueryUI animation 的鼠标悬停效果。

更新： 完成创建客户端行为（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 );
     });

【讨论】：

所以我已经掌握了基础知识，作为替代方案，我只在悬停时将不透明度设置为 0.5。如果我想为要通过电子邮件发送的提交表单选择最多 4 张图像，我可以使用 php 还是某种 jquery？
@sansome 您将使用带有 jquery 的 javascript 来确保只选择四个并将其存储在某处（可能在 javascript 数组中）然后您发布到您的服务器后端，可能与您的方式/相同的格式flash 应用程序可以，您可以为此使用jquery.ajax()。

【解决方案2】：

就我个人而言，我不会为此使用 javascript 或 jquery。

我会使用 CSS3 过渡。当您将鼠标悬停在 div 上时，tile-image 应该会缩小，使用 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 回退。

【讨论】：

感谢 ThomasM，我没有想到 css3 过渡。