-1

メニューを効果的にプルダウンし、css padding 属性を使用して大きくする JavaScript 関数を作成しようとしています。

これが元のhtmlです（私が欲しい部分はnavbar.phpにあります）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lux</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon2.ico" type="image/x-icon">
<link rel="icon" href="favicon2.ico" type="image/x-icon">
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript" src="js/pageFunctions.js"></script>

</head>

<body onload="setUpSlideShow(); openPage()">
    <?php include 'navbar.php' ?>
    <div class="content">
            <div id="slideshow">
                <div id="slides">
                    <div class="slide"><a href="under_construction.php"><img src="images/tshirt.jpg" class="mainImage" /></a></div>
                    <div class="slide"><a href="under_construction.php"><img src="images/MOON.jpg" class="mainImage" /></a></div>
                    <div class="slide"><a href="under_construction.php"><img src="images/MOON2.jpg" class="mainImage" /></a></div>
                </div>
                <div id="slides-controls">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
    </div>
</body>
</html>

次に、navbar.php は次のとおりです。

<div id="headbar">
        <div class="headholder">
            <ul class="navbar">
                <a href="/lux/"><li>Home</li></a>
                <a href="clothing.php"><li>Clothing</li></a>
                <a href="about.php"><li>About</li></a>
                <a href="contact.php"><li>Contact</li></a>
            </ul>
        </div>
</div>

ヘッドバーのCSSは次のとおりです。

#headbar {
width: 100%;
background-color: #999999;
padding: 35px 0 0 0;
text-align: center;
}

最後に、JavaScript のコードは次のとおりです。

function openPage() {
    var i;
    for(i=0;i<30;i++) {
        document.getElementById('headbar').style.paddingTop+=1;
    }
}
4

1 に答える 1

2

1 つのより良いオプションは、これを試すことです。

function openPage() {
    var i, el = document.getElementById('headbar');
    for(i=0;i<30;i++) {
        el.style.paddingTop = el.style.paddingTop + i;
    }
}

.animate()または、jQuery のメソッドを使用できます。

于 2013-06-03T20:20:18.047 に答える