我有一个表单,用户可以在其中进行选择,然后根据这些选择动态生成图形并显示为图像。
目前,我通过在 jQuery 对话框中显示图像来做到这一点。
是否可以将某些东西放在一起(最好使用 jQuery),以便在显示一个图像并且用户提交另一个选择时,第一张图像直接变形为第二张图像而不显示中间和不必要的背景视图?
我有一个表单,用户可以在其中进行选择,然后根据这些选择动态生成图形并显示为图像。
目前,我通过在 jQuery 对话框中显示图像来做到这一点。
是否可以将某些东西放在一起(最好使用 jQuery),以便在显示一个图像并且用户提交另一个选择时,第一张图像直接变形为第二张图像而不显示中间和不必要的背景视图?
您可以在对话框内将两个图像放在彼此的顶部(将位置设置为绝对并使用 z-index),当第二个图像加载后,将 alpha 从一个设置为另一个。这应该有效。
感谢您向我指出jQuery 方法fadeIn 和fadeOut 交叉淡入淡出。我看到 jQuery 循环插件使用以下代码变形 2 个图像。但是我看到您的解决方案直接使用 jQuery 方法,因此在这方面您的解决方案可能更有吸引力。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.cycle.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$('#crossfade').cycle();
});
</script>
<div id="crossfade">
<img src="1.jpg" />
<img src="2.jpg" />
</div>
</body>
</html>
最后,对于我的图形应用程序,我采用了一个解决方案,该解决方案在淡入新图像之前显示了一条繁忙的消息。这主要是因为我使用 jpgraph 库动态生成图像,我不确定如何在变形解决方案中容纳这些动态创建的图像。