Question

我正在尝试使用javascript显示包含360°全景内容的div。它在IE，Firefox，Safari，Iphone，Ipad和Android 3（平板电脑）上运行完美，但在Android手机（2.3.3）上无法正常工作。

从我的全景图中我调用了一个javascript函数来淡化具有绝对位置且显示的div：none。

这是javascript

function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
    $('#wrapper'+divnum).fadeOut("slow");}

这是我的HTML

<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>


<script type="text/javascript">
// <![CDATA[

    var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
    swf.addVariable("xml", "nantes.xml");
    swf.addParam("wmode","opaque");
    swf.embed("pano");

// ]]>

    </script>
</div>



<div id="wrapper1"><div id="scroller">
<div class="closetop"><a href="javascript:" onClick="fermerDiv(1)">Fermer</a></div>
<div class="closebottom"><a href="javascript:" onClick="fermerDiv(1)">Fermer</a></div>
<div id="tabContainer1">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Texte</li>
        <li id="tabHeader_2">Photos</li>
        <li id="tabHeader_3">Vidéos</li>
      </ul>
    </div>
<div class="tabscontent">

<div class="tabpage" id="tabpage_1">  
Texte...
</div>

<div class="tabpage" id="tabpage_2">
Photos...
</div>

<div class="tabpage" id="tabpage_3">
Videos...
</div>

</div>

</div>
</div>
</div>

和CSS

* {
margin:0;
padding:0;
}

@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
        html { height:100%; }
        body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000;   -webkit-user-select:none; -webkit-text-size-adjust:none; }

#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}

#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
    position:absolute;
    top:0px; bottom:-60px; left:0px;
    width:100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    overflow:auto;
    display:none;
}

#scroller {
    position:relative !important; 
    margin:0 auto;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    max-width: 600px;
    background:transparent;
    color: #fff;
    margin-bottom: 60px;
    text-align: justify;
}

这是默认android浏览器的行为：包装器div打开但保留在全景图后面。在Opera移动设备上，全景无法滚动，直到您调用包装器div，但随后包装器在pano上（这是正确的）但您无法滚动它，您可以滚动全景而不是......

我真的不知道这个问题...... 如果有人有想法，那么非常感谢!!!

我的测试页面就在那里：http://www.360images.fr/nantes/nantes.html

Answer 1

我也有这个问题。我添加

.hide()

之前

$('divelement').fadein

作品。

Android手机上的fadein div

1 个答案: