-1

我正在尝试编写一个 javascript 函数，该函数将有效地下拉菜单并使用 css 填充属性使其更大。

这是原始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

一个更好的选择是试试这个：

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

或者你可以使用 jQuery 的.animate()方法。

于 2013-06-03T20:20:18.047 回答