Question

我非常擅长在手机差距中使用HTML，CSS和JS等。

我不知道如何解决这个问题。我做了一些研究，但对我来说没有意义。

我有一个小符号页面

<a href="largeSymbol.html" class="symbol"> <img src="img/car.png" alt="car"></a> 
<a href="largeSymbol.html" class="symbol"> <img src="img/lorry.png" alt="lorry"></a> 
<a href="largeSymbol.html" class="symbol"> <img src="img/house.png" alt="house"></a>

当用户点击其中一个符号时，我希望将图像发送到大符号页面，在那里它会显示放大的符号。

如果用户返回并选择另一个符号，我希望它覆盖此图像。

如何将此代码编入我的应用程序？

我最初认为我可以为每个符号创建一个放大的符号页面，但这意味着会有超过300页。因此，为什么我试图弄清楚如何使用一个放大的符号页面，所有的符号可以放大和看到。

Answer 1

您可以在链接中添加查询字符串参数

<a href="largeSymbol.html?src=/img/car.png" class="symbol"> <img src="img/car.png" alt="car"></a> 
<a href="largeSymbol.html?src=/img/car.png" class="symbol"> <img src="img/lorry.png" alt="lorry"></a> 
<a href="largeSymbol.html?src=/img/car.png" class="symbol"> <img src="img/house.png" alt="house"></a>

然后在 largeSymbol.html 上，您可以使用URI.js库来读取查询字符串并采取相应措施，可能是这样的

<img id='big-image' src='' />
<script src='https://code.jquery.com/jquery-2.2.0.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.js'></script>

<script>
    var querySrc = URI( window.location.href ).search( true ).src;
    $("#big-image").attr( "src" , querySrc );
</script>

如何使用phonegap将图像发送到另一个页面

1 个答案: