2012-03-27 1 views
0

Недавно я наткнулся на сайт под названием Google Gravity, и я подумал, что было бы здорово реализовать на моей домашней странице. После поиска я обнаружил, что их Javascript можно использовать довольно легко. Я видел примерную веб-страницу, закодированную из нее, которую можно увидеть здесь. http://ankitpatel.info/mygravity/относительно обновления классов элементов img в Javascript

Что я хочу сделать, так это создать внутреннюю переменную счетчика в PHP, чтобы каждый n-й раз пользователь переходил на страницу «Главная», скажем, каждый пятый раз, домашняя страница получает эффект гравитации, который был бы всем divs, изображения, возможно, заголовочные тексты. Выглядит забавно.

Так что я решил, что перед тем, как закодировать его на моем существующем сайте, я бы сразу понял его на странице примера, и таким образом я мог бы все это готово и без ошибок. Ну вот код, который я получил на вышеуказанной веб-странице, и некоторые изменения, которые я сделал.

В исходном коде 4 img имеют класс = 'box2d', жестко закодированный в них.

На моей домашней странице у них не было бы такого класса, который был бы прикреплен первоначально. Как только счетчик PHP прочитает 5-й вид, я бы назвал функцию Javascript Gravity(), которая прошла бы через все div и добавила бы дополнительный класс к каждому, чтобы получить эффект. Правильно ли, это лучший способ?

Я попытался запустить следующее, но он не работает. Однако, если я вручную помещаю class = 'box2d' в каждый из них, он работает.

Я ценю все ответы на этот вопрос. Благодарю.

<!DOCTYPE html> 
<html> 
<head> 
<title>Bigger Brands - Bigger Gravity (Thanks to Google Gravity js)</title> 
<script src="mygravity/ga.js" async="" type="text/javascript"></script> 
</head> 

<body style="position: static;"onload="getImages()"> 

<div id="content"> 
     <img src='mygravity/images/facebook-logo.jpg'/> 
    <img src='mygravity/images/google.jpg'/> 
    <img src='mygravity/images/twitter.png'/> 
    <img src='mygravity/images/microsoft-logo.png'/> 
</div> 

<script src="mygravity/api" type="text/javascript"></script> 
<script src="mygravity/defaulten.js" type="text/javascript"></script> 
<script src="mygravity/gravityscript.js" type="text/javascript"></script> 

<script language="JavaScript" type="text/javascript"> 
    function getImages(){ 

    var images = document.getElementsByTagName("img"); 
    var i; 

    for(i = 0; i < images.length; i++) { 
     images[i].className += " box2d"; 
     } 
    } 
</script> 

</body> 
</html> 

ответ

0

Гравитационный сценарий находит все теги с классом box2d, когда он инициализирует. Если вы добавите эти классы после инициализации, вы должны запустить следующее после добавления классов.

init(); 
run(); 
+0

Не могли бы вы дать мне небольшой полезный пример, где я положил это и как его написать? Я только недавно схватил JS. – abelusmc