Question

我正在使用一些JavaScript来进行图像交换。

在桌面浏览器上运行良好，但不适用于移动/小型设备。

<p><img id="ima" src="images/web_assets/image1.jpg" width="270px" />
</p>
<p><a href="#" onmouseover="showT( 'images/web_assets/image1.jpg' )"><img src="images/web_assets/image1.jpg" width="84px" /></a>&nbsp;<a href="#" onmouseover="showT( 'images/web_assets/image2.jpg' )"><img src="images/web_assets/image2.jpg" width="84px" /></a>&nbsp;<a href="#" onmouseover="showT( 'images/web_assets/image3.jpg' )"><img src="images/web_assets/image3.jpg" width="84px" /></a>
</p>
<script type="text/javascript">
    // <![CDATA[
    function showT(image) {
        document.getElementById('ima').setAttribute('src', image)
    }
    // ]]>

</script>

任何想法是如何在所有设备（即台式机，iPad，iphone，其他移动设备）上运行？

新代码：

<p><img id="ima" src="images/web_assets/image1.jpg" width="270px" />
</p>
<p><a href="#" onClick="showT( 'images/web_assets/image1.jpg' )"><img src="images/web_assets/image1.jpg" width="84px" /></a>&nbsp;<a href="#" onClick="showT( 'images/web_assets/image2.jpg' )"><img src="images/web_assets/image2.jpg" width="84px" /></a>&nbsp;<a href="#" onClick="showT( 'images/web_assets/image3.jpg' )"><img src="images/web_assets/image3.jpg" width="84px" /></a>
</p>
<script type="text/javascript">
    // <![CDATA[
    function showT(image) {
        document.getElementById('ima').setAttribute('src', image)
    }
    // ]]>

</script>

但是onclick，它将页面重新打到了浏览器的顶部？！？！

Answer 1

“onmouseover”活动并不是制作跨设备工作的最佳选择，因为您只是在手机，平板电脑上没有鼠标。

也许考虑让它为无鼠标设备的点击事件工作？

RWD移动设备图像交换JavaScript

1 个答案: