Question

在我的html页面中，如果浏览器支持画布则要插入3d图像，如果不支持，则插入静态图像。图像应该动态插入页面加载。

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello Modernizr</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script src="modernizr.js"></script>
    <script>
        if (Modernizr.canvas) 
        {
            $(document).ready(function()
            {
                $("p").show();
            });
            alert("This browser supports HTML5 canvas!");
        } 
        else 
        {
            $(document).ready(function()
            {
                $("p").hide();
            });
        }
    </script>
</head>
<body>
    <p>If you click on the "Hide" button, I will disappear.</p>eseardsa
</body>
</html>

Answer 1

您可以在else语句中添加图像，类似于下面的代码。虽然您可能想要操纵div而不是p。

} else {
  $(document).ready(function(){
    $('p').text('<img src="yourImg.png" />');
  }
}

Answer 2

更改java脚本

在所有浏览器中显示图像

<div class="cont_machines_3d">
    <div class="cont_3d">

    <iframe  height="600" scrolling="auto" src="3d/3dimage.html" width="800">
    </iframe>
    </div>
    </div>

以ie

显示图像

<div class="cont_machines_3d_ie"><img src="/3d/images/img.jpg" width="800" /></div>
</div>

如果浏览器不支持3D图像，则显示静态图像

2 个答案: