помогите понять скрипт
Здравствуйте.
Пишу на php и JS приходится пользоваться только от случая к случаю. Потому знаю его лишь поверхностно. А очень нужно разобраться с одним скриптом. UPD: см. http://javascript.ru/forum/misc/1807...tml#post109133 Кому не сложно, прошу пояснить ряд моментов: 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... |
1)
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
Если типом переменной id является строка, то она находит элемент в dom с таким id и возвращает его самого, в противном случае - возвращает саму переменную (которая, предполагается, является элементом dom). 2-3) Почитайте про ООП вот тут, многое станет понятнее, я думаю. 4) Про прозрачность и плавное её изменение можете почитать тут. |
Спасибо за ответ.
1. Т.е. я так понял $ может быть именем функции. 2-3. Да, я читал этот раздел. но там нет ничего про initialize 4. как сделать прозрачность-то я знаю (opacity + filter). Не понятно как это вкрутить в функцию Move и как она вообще работает |
1) Вы абсолютно правильно поняли.
2-3) Чёрт. Его можно назвать holy_shit - функциональность этого метода не изменится. Просто человек, разрабатывавший это, так его назвал. 4) У вас два варианта: разбираться самому и спрашивать по ходу, либо идти в раздел "Работа". Но не просить "Пожалуйста, объясните мне, как это работает." Вряд ли кто согласится это делать. Хотя, как знать... |
1. отлично
2-3. блин, даже не знаю почему я его выделил в какой-то особенный метод. теперь ясно, спасибо. 4. ну так я выбрал первый вариант :) вот и пытаюсь разбираться. просто у меня ощущение, что проблема только в непонимании синтаксиса js, а изменений-то там всего несколько строк нужно. Можете объяснить, что значат квадратные скобки в выражении this._slider.style[style]? Тот style (переменная), который в скобках - это css свойство которое либо left либо top. Но почему оно пишется в скобках, а не так this._slider.style.style? |
Цитата:
|
спасибо. перечитаю их еще раз.
|
Скажите, пожалуйста, где ошибка.
почему-то странно работает функция 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>
|
если заменить 13 строку так
mainobjs[1].style.opacity = parseInt(mainobjs[1].style.opacity) + 0.2; то ошибка о потерянном объявлении пропадает, однако значение opacity все равно не увеличивается :( |
<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, последние версии гугл хрома и оперы... Очень неплохая статья по изменению прозрачности вот тут. |
| Часовой пояс GMT +3, время: 12:02. |