Сегодня хочу познакомить Вас с замечательной библиотекой JavaScript -
Jquery.
jQuery — JavaScript-фреймворк, фокусирующийся на взаимодействии JavaScript и HTML.
(Источник)С помощью данной библиотеки Вы можете сделать почти что угодно! Это и Ajax, и динамическое перемещение объектов..
jquery подключается как один JavaScript-файл:
<script language = "javascript" src="jQuery.js"></script>
Сегодня хочу познакомить Вас с тем, как можно двигать объекты по окну браузера с использованием jQuery
Во-первых создадим сам объект, пусть это будет обычный :
<div id="box"></div>
И применим к нему несколько css стилей:
<style type="text/css">
#box {
background: #6699FF;
height: 100px;
width: 100px;
position: relative;
}
</style>
В результате квадрат 100 на 100 синего цвета с переменчивым положением.
Затем подключаем библиотеку jquery, например так:
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
Скачать библиотеку можно например
отсюдаМожно сделать кнопку, ко нажатию которой будет исполняться код:
<input type="button" class="run" value = "Run!" />
Теперь переходим к самому интересному - программной части
<script type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){ //если наша кнопка нажата
$("#box").animate({opacity: "1", top: "+=500" }, 1200); //Прозрачность - 1 (т.е.
//непрозрачный), изменение положения по вертикали - смещение на 500 пх вниз
$("#box").animate({opacity: "1", left: "+=500"}, "fast", 1200); //почти аналогично первому,
//смещение по горизонтали - 500 пх вправо
$("#box").animate({opacity: "1", top: "-=500"}, "fast", 1200);
$("#box").animate({opacity: "1", left: "-=500"}, "fast", 1200);
$('#box').css({background: "#FF9922"}); //редактирование стилей css объекта box
$("#box").animate({top: "0"}, "fast"); //возвращение box на место
$("#box").slideUp(); //тут мы как бы "сжимаем" наш объект
$("#box").slideDown("slow"); //а тут опять возвращаем в исходное состояние
return false;
});
});
</script>
Все действия команд достаточно хорошо описаны в комментариях. Кроме перемещения объектов jquery обладаем массой других возможностей, которые мы рассмотрим позже
