2

上下にスライドするアニメーションメニューを作成しようとしています。残念ながら、それは機能していません。エラーコンソールを確認しましたが、構文エラーはありません。これが私のJavascriptです：

function showLayer() {
    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.bottom);
    if (layerPosition > 700) {
        hiddenLayer.style.bottom = (layerPosition + 5) + "px";
        setTimeout("showLayer()", 20);
    }
}

function hideLayer() {
    var hiddenLayer = document.getElementByID("mainmenu");
    hiddenLayer.style.bottom = "700px";
}

全体のコンテキストは次のとおりです。

<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>

<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px; 
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-    
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;     
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width: 
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255, 
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>

<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')">&nbsp;</div>
<div id="mainbuttontext">F</div>
</body>
4

1 に答える 1

1

私はあなたの問題を見つけたと思います！これは非常に奇妙なことで説明できませんが、JavaScriptでスタイルを取得するには、cssをインラインにする必要があります（スタイルを設定するために必要ではありません）。

そこで、cssをインラインに配置してコードを変更しました。

HTML：

<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>

<!--I wrote 100px just for the test, you can change it and modify the js-->

JS：

function showLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    var layerPosition=parseInt(hiddenLayer.style.bottom);
    if(layerPosition>50)
    {
        hiddenLayer.style.bottom=(layerPosition+5)+"px";
        setTimeout("showLayer()",20);
    }
}

function hideLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    hiddenLayer.style.bottom="700px";
}

フィドル： http： //jsfiddle.net/8MWfV/

そして、これはインラインでないcssが機能しないことを示すフィドルです：http：//jsfiddle.net/kfUrP/

于 2012-06-06T19:00:56.533 に答える