15.06.2011, 21:15
|
Аспирант
|
|
Регистрация: 30.04.2010
Сообщений: 49
|
|
помогите понять скрипт
Здравствуйте.
Пишу на php и JS приходится пользоваться только от случая к случаю. Потому знаю его лишь поверхностно. А очень нужно разобраться с одним скриптом.
UPD: см. помогите понять скрипт
Кому не сложно, прошу пояснить ряд моментов:
1. Что значит:
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
Если б вместо $ было имя, я бы подумал, что это анонимная функция. А так сомневаюсь. Или можно использовать $ в качестве имени? И что она возвращает мне тоже не совсем понятно.
2.
Object.extend - это некая имитация механизма наследования?
3.
TransformView.prototype насколько я понял описание прототипа (почитал про это тут в учебнике на сайте), но что значит initialize: ?
4. И (ради чего мне все это нужно) как работает функция Move? Я бы хотел изменить способ смены изображений со сдвигающегося, на затухающе-появляющийся и, насколько смог разобраться, именно эту функцию мне надо переписать. Знаю, что надо действовать css свойством opacity (filter для ie) но ничего пока не получается.
Если кто-то найдет возможность мне ответить, буду рад как можно более подробным комментариям и по всему остальному скрипту. Что-то я вроде понял, но не факт что правильно... темный лес для меня JS...
Последний раз редактировалось Polkan, 17.06.2011 в 11:40.
|
|
15.06.2011, 21:32
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
1)
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
Если типом переменной id является строка, то она находит элемент в dom с таким id и возвращает его самого, в противном случае - возвращает саму переменную (которая, предполагается, является элементом dom).
2-3) Почитайте про ООП вот тут, многое станет понятнее, я думаю.
4) Про прозрачность и плавное её изменение можете почитать тут.
|
|
15.06.2011, 21:52
|
Аспирант
|
|
Регистрация: 30.04.2010
Сообщений: 49
|
|
Спасибо за ответ.
1. Т.е. я так понял $ может быть именем функции.
2-3. Да, я читал этот раздел. но там нет ничего про initialize
4. как сделать прозрачность-то я знаю (opacity + filter). Не понятно как это вкрутить в функцию Move и как она вообще работает
|
|
15.06.2011, 21:59
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
1) Вы абсолютно правильно поняли.
2-3) Чёрт. Его можно назвать holy_shit - функциональность этого метода не изменится. Просто человек, разрабатывавший это, так его назвал.
4) У вас два варианта: разбираться самому и спрашивать по ходу, либо идти в раздел " Работа". Но не просить "Пожалуйста, объясните мне, как это работает." Вряд ли кто согласится это делать. Хотя, как знать...
|
|
15.06.2011, 22:18
|
Аспирант
|
|
Регистрация: 30.04.2010
Сообщений: 49
|
|
1. отлично
2-3. блин, даже не знаю почему я его выделил в какой-то особенный метод. теперь ясно, спасибо.
4. ну так я выбрал первый вариант вот и пытаюсь разбираться. просто у меня ощущение, что проблема только в непонимании синтаксиса js, а изменений-то там всего несколько строк нужно.
Можете объяснить, что значат квадратные скобки в выражении this._slider.style[style]? Тот style (переменная), который в скобках - это css свойство которое либо left либо top. Но почему оно пишется в скобках, а не так this._slider.style.style?
|
|
15.06.2011, 22:31
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
Цитата:
|
Есть два синтаксиса добавления свойств в объект. Первый - точка, второй - квадратные скобки:
// эквивалентные записи
o.test = 5
o["test"] = 5
Квадратные скобки используются в основном, когда название свойства находится в переменной:
var name = 'test'
o[name] = 5
Здесь имя свойства "test" является ключом в ассоциативном массиве, по которому лежит значение 5.
<...>
Доступ к свойству осуществляется точно так же:
alert(o.test)
alert(o['test'])
|
Вы невнимательно читали статьи по ООП))
|
|
15.06.2011, 22:54
|
Аспирант
|
|
Регистрация: 30.04.2010
Сообщений: 49
|
|
спасибо. перечитаю их еще раз.
|
|
17.06.2011, 11:14
|
Аспирант
|
|
Регистрация: 30.04.2010
Сообщений: 49
|
|
Скажите, пожалуйста, где ошибка.
почему-то странно работает функция FadeInOut
т.е. работает только первый шаг - увеличение opacity на 0.1
а дальше значение не увеличивается, а консоль пишет "ожидался конец значения, но найдено 0.1. Ошибка при анализе значения opacity. Потерянное объявление"
<!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">
<head>
<title>Hello!</title>
</head>
<body>
<script>
FadeInOut = function() {
var oThis = this;
alert(mainobjs[1].style.opacity);
if (mainobjs[1].style.opacity < 1) {
mainobjs[1].style.opacity += 0.1;
var timer = setTimeout(function(){ oThis.FadeInOut(); }, 10);
}
}
window.onload=function(){
mainobjs = document.getElementById("idSlider").getElementsByTagName("li");
for (var i = 0; i < mainobjs.length; i++){
mainobjs[i].style.opacity = 0;
}
FadeInOut();
}
</script>
<ul class="slider" id="idSlider">
<li id="li_1"><img src="http://www.multikino.com/img/films/f_4747/fotos/2.jpg" width="500" height="300" border="0" alt="" title=""></li>
<li id="li_2"><img src="http://www.otterevil.ru/wp-content/uploads/2009/07/Movies_Films_R_RoboCop_010468_.jpg" width="500" height="300" border="0"></li>
<li id="li_3"><img src="http://www.getthebigpicture.net/storage/pics/09/robocop97.jpg" width="500" height="300" border="0" alt="" title=""></li>
<li id="li_4"><img src="http://images.mylot.com/userImages/images/postphotos/1033074.jpg" width="500" height="300" border="0" alt="" title=""></li>
</ul>
</body>
</html>
Последний раз редактировалось Polkan, 17.06.2011 в 11:19.
|
|
17.06.2011, 11:51
|
Аспирант
|
|
Регистрация: 30.04.2010
Сообщений: 49
|
|
если заменить 13 строку так
mainobjs[1].style.opacity = parseInt(mainobjs[1].style.opacity) + 0.2;
то ошибка о потерянном объявлении пропадает,
однако значение opacity все равно не увеличивается
|
|
17.06.2011, 14:01
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
<div id="div" style="width: 100px; height: 100px; background: #000; opacity: 0.5">Text</div>
<script>
obj=document.getElementById("div");
alert(typeof(obj.style.opacity)); // string
</script>
Соответственно, вам нужно изменить всю функцию, учитывая, что opacity - это строка. И ещё не забудьте, что opacity действует только для самых браузеров: Firefox 4, последние версии гугл хрома и оперы...
Очень неплохая статья по изменению прозрачности вот тут.
|
|
|
|