Попытка изменить наложение ячеек с помощью javascript

-1

Я пытаюсь написать функцию javascript, которая эффективно вытащит меню и увеличит его с помощью атрибута 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 является:

#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; 
    } 
}

источник

2013-06-03 Chris Lang

Хорошо, хорошо выглядит. Но можете ли вы использовать jQuery? –

И в чем проблема/вопрос? –

@JamesMontagne его просто не работает, файлы загружаются, но он просто не выполняется, поэтому я думал, что это могло быть что-то с моим кодом –

Один лучший вариант, чтобы попробовать это:

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-03 20:20:18

Я бы также использовал объявление var только один раз: var i, el = document.getElementById ('headbar'); Затем обратитесь к вашему var в цикле: el.style.paddingTop = el.style.paddingTop + 1; –

@MichaelFreake Yup, обновленный. Неплохо. –

Попытка изменить наложение ячеек с помощью javascript

ответ

Смежные вопросы