Я пытаюсь сделать баннер, где должен быть текст, спускающийся сверху вниз. Код просто для теста, чтобы увидеть, работает ли он, поэтому я буду его оптимизировать позже. Я сделал этот код:летающий текст сверху вниз

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    div.background { 
    background: url(banner.jpg) repeat; 
    border: 2px solid black; 
    } 

    div.transbox { 
    margin: 30px; 
    background-color: #ffffff; 
    border: 1px solid black; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
    width: 200px; 
    height: 500px; 
    } 

    div.transbox p { 
    margin: 5%; 
    font-weight: bold; 
    color: #000000; 
    } 
    #animation{font-size:20px; margin-top:40px; margin-left:50px;} 
</style> 

<script> 

function loadImage() { 
    $("#animation").animate({ marginTop: "300px" }, 1500).animate({ marginBottom: "40px" }, 800); 


} 


</script> 
</head> 

<body onload="loadImage()"> 
    <div class="background"> 
     <div class="transbox" id="animation"> 
      <p>Text to fly in</p> 
     </div> 
    </div> 

</body> 
</html>

Если я поставил предупреждение («тест»); в javascript-коде я получаю предупреждение. Но когда я пытаюсь что-то оживить, ничего не происходит. Итак, я думаю, что это код анимации в javascript, с чем-то не так? Кто-нибудь может понять, что я делаю неправильно?

С наилучшими пожеланиями Мадс

источник

2015-03-16 Anonymous

У вас не хватает JQuery включить. Попробуйте добавить эти [JQuery 1.11.2] (https://developers.google.com/speed/libraries/devguide#jquery) и [JQuery UI] (https://developers.google.com/speed/libraries/devguide# jqueryui). Предупреждение отображается, потому что оно относится к JavaScript plain, которое понимается всеми веб-браузерами, поскольку при их установке их собственный механизм javaScript. –

Ах, конечно. Большое спасибо за ответ. Это глупая идея использовать их сегодня? Я думаю о времени загрузки и так далее. Это имеет значение сегодня? –

Они включают текст, сокращенный, что означает, что каждый символ сжимается, чтобы обеспечить максимальную нагрузку при зарядке кода. По моему мнению, я уже использую их, потому что это заставляет вас зарабатывать время при разработке, а время загрузки не так уж долго, чтобы рассмотреть возможность использования только JavaScript. –

1 Включите библиотеку JQuery.

2 Используйте абсолютные значения в `animate` функции:

$("#animation").animate({ top: 300 }, 1500).animate({ top: 40 }, 800);

Для этого вам необходимо сделать свой <div class="transbox" id="animation"> в absolute расположен.

источник

2015-03-16 11:02:40 ArinCool

Вы используете Jquery здесь вы просто забыли включить его в код: рабочий код:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<style> 
    div.background { 
    background: url(banner.jpg) repeat; 
    border: 2px solid black; 
    } 

    div.transbox { 
    margin: 30px; 
    background-color: #ffffff; 
    border: 1px solid black; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
    width: 200px; 
    height: 500px; 
    } 

    div.transbox p { 
    margin: 5%; 
    font-weight: bold; 
    color: #000000; 
    } 
    #animation{font-size:20px; margin-top:40px; margin-left:50px;} 
</style> 

<script> 

function loadImage() { 
    $("#animation").animate({ marginTop: "300px" }, 1500).animate({ marginBottom: "40px" }, 800); 


} 


</script> 
</head> 

<body onload="loadImage()"> 
    <div class="background"> 
     <div class="transbox" id="animation"> 
      <p>Text to fly in</p> 
     </div> 
    </div> 

</body> 
</html>

источник

2015-03-16 10:58:35

.animate() функция JQuery. Вам нужно включить библиотеку jQuery для ее использования.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

источник

2015-03-16 10:58:47

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<style> 
 
    div.background { 
 
    background: url(banner.jpg) repeat; 
 
    border: 2px solid black; 
 
    } 
 

 
    div.transbox { 
 
    margin: 30px; 
 
    background-color: #ffffff; 
 
    border: 1px solid black; 
 
    opacity:0.6; 
 
    filter:alpha(opacity=60); 
 
    width: 200px; 
 
    height: 500px; 
 
    } 
 

 
    div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
    } 
 
    #animation{font-size:20px; margin-top:40px; margin-left:50px;} 
 
</style> 
 

 
<script> 
 

 
function loadImage() { 
 
    $("#animation").animate({ marginTop: "300px" }, 1500).animate({ marginBottom: "40px" }, 800); 
 

 

 
} 
 

 

 
</script> 
 
</head> 
 

 
<body onload="loadImage()"> 
 
    <div class="background"> 
 
     <div class="transbox" id="animation"> 
 
      <p>Text to fly in</p> 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

источник

2015-03-16 10:59:44

Большое спасибо за все ваши ответы. Я узнал, как это работает сейчас. спасибо –

Просто включите JQuery LIB на вашей странице в разделе заголовка

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

источник

2015-03-16 11:29:34 ANKIT

летающий текст сверху вниз

ответ

1 Включите библиотеку JQuery.

2 Используйте абсолютные значения в animate функции:

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

2 Используйте абсолютные значения в `animate` функции: