Подскажите пожалуйста с трансформацией изображения
Подскажите пожалуйста, как трансформировать изображение в Javascript, а то в учебнике пример кода приводится, но он не работает:help: :help: :help:
|
Что конкретно вы хотите сделать с изображением?
|
Цитата:
|
Цитата:
|
Ну изменяйте ширину и высоту
http://javascript.ru/blog/Andrej-Par...cii-JavaScript |
Цитата:
<BODY onload = "transform()"> <IMG ID = " m y i m g " SRC = " p i c t . g i f " STYLE = " p o s i t i o n : a b s o l u t e ; t o p : 1 0 ; l e f t : 5 0 ; v i s i b i l i t y = "hidden" f i l t e r : r e v e a l t r a n s ( d u r a t i o n= 3 , transition = 12)"> </BODY> <SCRIPT> function transforraO{ // появление изображения d o c u m e n t . a l l . m y i m g . s t y l e . v i s i b i l i t y = " h i d d e n " /* д е л а е м и з о б р а ж е н и е невидимым */ myimg. filters C 'revealtrans") . applyO /* фиксируем исходное состояние изображения */ myimg.style.visibility = "visible" // делаем изображение видимым myimg. f iltersC ' revealtrans") .play() // выполняем преобразование } </SCRIPT> </HTML>" |
Такой учебник надо сжечь)
|
А нормальный учебник тогда не подскажешь?:)
|
|
Цитата:
Цитата:
|
А в svg и css3 трансформации интереснее :).
(function(){
var a = 0;
var image = document.createElement('image');
image.src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'; // снова
image.onclick = function(){
image.parentNode.removeChild(image);
clearInterval(intervalId);
}
with(image.style){
position = 'fixed';
top = '50%';
left = '50%';
margin = '-38 0px 0px -162';
cursor = 'pointer';
}
document.body.appendChild(image);
var intervalId = setInterval(function(){
a += .05;
image.style.MozTransform = image.style.WebkitTransform = image.style.OTransform = image.style.transform = 'rotate(' + (Math.sin(a) * 20) + 'deg) scale(' + (Math.sin(a*4) * .1 + 1) + ', ' + (-Math.sin(a*4) * .1 + 1) + ') ';
}, 40);
})()
|
Цитата:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Опыты с jQuery</title>
<style type="text/css">
#my_div {
background: #cccccc;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<!-- Подключение jQuery -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
// Обработчик события загрузки документа
$(document).ready(function(){
// Обработчик щелчка по элементу
$("#my_div").click(function(){
// Берём элемент по ID-у
$("#my_div")
// Изменяем ширину и высоту за 300 мили секунд
.animate({height: 300, width: 300}, 300)
// Изменяем координаты за 500 мс
.animate({left: 200, top: 200}, 500);
});
// Следующий обработчик и т.д. и т.п.
});
</script>
</head>
<body>
<div id="my_div">Щёлкни меня</div>
</body>
</html>
Вот простой пример с jQuery. Чтобы он работал нужно сначала саму либу качнуть http://docs.jquery.com/Downloading_jQuery. jQuery - это самый популярный фреймворк. По нему куча статей написано, + с ним достаточно просто разобраться. Хотя я конечно сначала рекомендую http://javascript.ru/book/definitiveguide. Страниц 300 хотя бы осилить. Потом можно про jQuery читнуть http://www.rsdn.ru/article/inet/jQuery.xml. |
Читаю этот учебник, и наткнулся на такое понятие, как Модули и пространства имен, но так и не понял, что это такое. Объясните пожалуйста чайнику, что это такое.:help: :help:
|
Для понимание пространств имён лучше обратиться к литературе по языкам C++ и С#(читается как си шарп). Там они объявляются следующим образом.
Код:
namespace ИМЯ_ПРОСТРАНСТВА_ИМЁН {// Создание объекта var o = new Object(); // Добавление и определение свойства (переменной) o.test = 5; alert(o.test); Вообще объектно ориентированное программирование в JS отличается от мнногих других языков и ИМХО разираться с ним лучше не с JS, а взять книгу по C++, так проще понять зачем вся эта канетель. Цитата:
|
Цитата:
|
Здесь имеется ввиду библиотека функций/фреймворк. Например такой как jQuery, Dojo, mootols, Prototype.
Цитата из книги: Этот фрагмент иллюстрирует первое правило разработки JavaScript-модулей: модуль никогда не должен выставлять больше одного имени в глобальном пространстве имен. Обеспечение этого требования достигается благодаря помещению всех переменных и функций в объект. не должен выставлять больше одного имени в глобальном пространстве Это имя - имя объекта. В контексте объекта, переменная называется свойством, а функция - методом. |
Т.е jQuery - это просто функции, которые кто-то написал, и их теперь все используют?
|
Цитата:
|
А что, эта библиотека как-то стандартизована, если её в браузере применяют. Ведь если я сейчас напечатаю свою библиотеку из нескольких функций, то все пользователи не смогут вызывать из нее функции, ведь так?
|
Цитата:
<!-- Подключение jQuery --> <script type="text/javascript" src="jquery-1.3.2.js"></script> Для того чтобы этот пример работал и у вас, вам тоже нужно скачать и подключить к своему сайту эту библиотеку http://docs.jquery.com/Downloading_jQuery |
Цитата:
|
Только подключаете. Сначала нужно скачать.
|
можно только одной строчкой "подключить"
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> но лучше скачать. |
| Часовой пояс GMT +3, время: 11:00. |