if(document.attachEvent)
document.attachEvent('onclick', clickHandler);
else if(document.addEventListener)
document.addEventListener('click', clickHandler, false);
else
document.onclick = clickHandler;
Плавное появление изображения при наведении указателя мышки.
Вот, по сути дела, первые мои нормальные функции. Два варианта. Может кому пригодятся.
1 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=10 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function eff(i,e){
if (timer[i.id]){clearInterval(timer[i.id])}
if (e.type!='mouseover'){z[i.id]=y;var t=dn}
else{z[i.id]=x;var t=up}
timer[i.id]=setInterval(function(){return time(i)},t)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i2 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i3 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i4 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
</body>
</html>[/HTML]
2 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=5 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function on(i){
if (timer[i.id]){clearInterval(timer[i.id])}
z[i.id]=x
timer[i.id]=setInterval(function(){return time(i)},up)}
function off(i){
clearInterval(timer[i.id])
z[i.id]=y
timer[i.id]=setInterval(function(){return time(i)},dn)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i2 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i3 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i4 onMouseOver=on(this) onMouseOut=off(this)>
</body>
</html>[/HTML]
А может, кто чего предложит для улучшения. Быстренько улучшим.:)
1 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=10 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function eff(i,e){
if (timer[i.id]){clearInterval(timer[i.id])}
if (e.type!='mouseover'){z[i.id]=y;var t=dn}
else{z[i.id]=x;var t=up}
timer[i.id]=setInterval(function(){return time(i)},t)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i2 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i3 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
<img id=i4 onMouseOver=eff(this,event) onMouseOut=eff(this,event)>
</body>
</html>[/HTML]
2 Вариант.
[HTML]<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='img/1.jpg'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=5 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function on(i){
if (timer[i.id]){clearInterval(timer[i.id])}
z[i.id]=x
timer[i.id]=setInterval(function(){return time(i)},up)}
function off(i){
clearInterval(timer[i.id])
z[i.id]=y
timer[i.id]=setInterval(function(){return time(i)},dn)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i2 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i3 onMouseOver=on(this) onMouseOut=off(this)>
<img id=i4 onMouseOver=on(this) onMouseOut=off(this)>
</body>
</html>[/HTML]
А может, кто чего предложит для улучшения. Быстренько улучшим.:)
Сделай лучше по классу или rel. Т.е. вместо никому не нужных onMouseOver и onMouseOut по поределённому классу или релу и добавляй onload для боди в скрипте. Т.е. что должно получится в html
[html]
<body>
<img src="foo.jpg" rel="demonstration" />
</body>
[/html]
Т.е. в идеале должно получится так. Это удобней и выглядет более "по взрослому" :)
[html]
<body>
<img src="foo.jpg" rel="demonstration" />
</body>
[/html]
Т.е. в идеале должно получится так. Это удобней и выглядет более "по взрослому" :)
Неплохо. Только тогда уж до кучи стоило бы упомянуть и о системных требованиях. Т.е. указать браузеры, которые это будут поддерживать, ибо думаю в курсе, что filter селектор это приблуда от MS, т.е. не стандартизированная фича, хотя безусловно полезная и в Opera 9.23 и FireFox 1.5 отображаемы корректно.
shaelf
Хорошо, почитаю, как это делается:) , и сделаю, спасибо.
Мне не очень нравится, как они работают в Мозолле и Опере. Какое то мерцание присутствует. От чего это может быть? Или мне кажется....
Хорошо, почитаю, как это делается:) , и сделаю, спасибо.
Мне не очень нравится, как они работают в Мозолле и Опере. Какое то мерцание присутствует. От чего это может быть? Или мне кажется....
Цитата: Ghirik
shaelf
Хорошо, почитаю, как это делается:) , и сделаю, спасибо.
Мне не очень нравится, как они работают в Мозолле и Опере. Какое то мерцание присутствует. От чего это может быть? Или мне кажется....
Хорошо, почитаю, как это делается:) , и сделаю, спасибо.
Мне не очень нравится, как они работают в Мозолле и Опере. Какое то мерцание присутствует. От чего это может быть? Или мне кажется....
Кажется. Лично я ни в Опере ни в Лисе разницы с Ослом не вижу. Просто скорее всего у тебя комп не очень мощновать, то и может протормаживать.
Цитата:
Только тогда уж до кучи стоило бы упомянуть и о системных требованиях
У меня что было, в том и проверил:) Основные IE, Mozilla и Opera, в них работает. Во всяком случае, в последних.
Цитата:
filter селектор это приблуда от MS, т.е. не стандартизированная фича,
Но я ведь напрямую не обращаюсь к фильтру, только проверяю наличие. Или, как то не так нужно делать?
Забавная штука получается. Если смотреть загрузку процессора и водить по картинкам, то Мозилла и IE довольно сильно его подгружают. А в Опере - полный штиль!
Цитата: Ghirik
Но я ведь напрямую не обращаюсь к фильтру, только проверяю наличие. Или, как то не так нужно делать?
Да нет, все так. Только имей в виду, что свойство filters для неподдерживающих браузеров равно undefined, а не boolen. Поэтому лично бы я вел сравнение по нему.
Цитата: Ghirik
Забавная штука получается. Если смотреть загрузку процессора и водить по картинкам, то Мозилла и IE довольно сильно его подгружают. А в Опере - полный штиль!
Ни чего удивительно. Расчет прозрачности ведется динамически. Т.е. нагрузка на проц. А в Опере могли пойти под другому. Ну к примеру расчитать каждый "кадр" и просто потом их прокручивать. Хотя точно знаю только лишь разрабы.
На загрузку вешается элементарно
[html]
<script type="text/javascript">
window.onload = youFunction()
</script>
[/html]
Если не хочешь забивать загрузку одной функцией, то сделай метод-аккамулятор, который собирает различные функции и вызывает
[html]
<script type="text/javascript">
window.onload = execute()
store = Array()
addFunction('nameFuntion') {
store[] = nameFunction()
}
//И их вызывать
function execute() {
for(var i = 0; i < store.lenght; i++) {
store
}
}
//Те получается, что через addFunction() ты добовляешь функцию для выполнения во время загрузки. Довольно полезно, когда нужно сделать вызов некой цепочки функций при определённом действии
</script>
[/html]
Этот скрипт на 90% нерабочий, т.к. целью было не сделать рабочий скрипт, а показать принцип. А собираются эллементы тоже просто. Если ты используешь какой либо фреймворк, то там коллекция собирается через $$ (или $E, точно не помню), если руками, то просто обойди дерево и вытащи все элементы, у которых rel/class равен твоему и массово задай им onMouseOver и onMouseOut. Задаются они через
[html]
document.getElementById('id').onMouseOver = function() {}
[/html]
Или аналог через дом (через него ты и будешь делать). Удачи.
[html]
<script type="text/javascript">
window.onload = youFunction()
</script>
[/html]
Если не хочешь забивать загрузку одной функцией, то сделай метод-аккамулятор, который собирает различные функции и вызывает
[html]
<script type="text/javascript">
window.onload = execute()
store = Array()
addFunction('nameFuntion') {
store[] = nameFunction()
}
//И их вызывать
function execute() {
for(var i = 0; i < store.lenght; i++) {
store
}
}
//Те получается, что через addFunction() ты добовляешь функцию для выполнения во время загрузки. Довольно полезно, когда нужно сделать вызов некой цепочки функций при определённом действии
</script>
[/html]
Этот скрипт на 90% нерабочий, т.к. целью было не сделать рабочий скрипт, а показать принцип. А собираются эллементы тоже просто. Если ты используешь какой либо фреймворк, то там коллекция собирается через $$ (или $E, точно не помню), если руками, то просто обойди дерево и вытащи все элементы, у которых rel/class равен твоему и массово задай им onMouseOver и onMouseOut. Задаются они через
[html]
document.getElementById('id').onMouseOver = function() {}
[/html]
Или аналог через дом (через него ты и будешь делать). Удачи.
Почитал про REL, со стилями я на ВЫ, потому, не могу себе представить, как можно запустить обработчик события используя стили. Разъясните, хотя бы в общих чертах.
Добираешься до элемента, и сравниваешь. Приведу пример через ID (тебе путь через DOM)
[html]
if(document.getElementById('id').className == 'need') {
// Тут подключаем обработчики
}
[/html]
[html]
if(document.getElementById('id').className == 'need') {
// Тут подключаем обработчики
}
[/html]
Ага... Понятно... Мне нравится "по взрослому".:)
Я пытался подобным образом, но у меня не вышло сделать кроссбраузерный вариант захвата событий. Мжет подскажете?
Я пытался подобным образом, но у меня не вышло сделать кроссбраузерный вариант захвата событий. Мжет подскажете?
Цитата: Ghirik
Мне нравится "по взрослому".:)
Да где-же тут "по взрослому"? У элемента img не может быть атрибута rel.
Цитата: alekciy
Да нет, все так. Только имей в виду, что свойство filters для неподдерживающих браузеров равно undefined, а не boolen. Поэтому лично бы я вел сравнение по нему.
Надо заметить, что в условии в любом случае происходит преобразование типа посредством метода ToBoolean. Следовательно undefined -> false.
Цитата: shaelf
Если не хочешь забивать загрузку одной функцией, то сделай метод-аккамулятор...
Давным-давно для таких целей используются методы addEventListener/attachEvent...
Цитата: AKS.
Надо заметить, что в условии в любом случае происходит преобразование типа посредством метода ToBoolean. Следовательно undefined -> false.
Безусловно. Я в курсе. Не было бы преобразования, скрипт бы не работал. Я просто упомянул об этом для сведения.
Цитата: AKS.
Давным-давно для таких целей используются методы addEventListener/attachEvent...
Мой склероз мне говорит, что у разных браузеров это делается разными методами. Хотя конечно может сейчас в этом отношении и достигли едиобразия... хотя зная MS сомнительно :D
Цитата: alekciy
Мой склероз мне говорит, что у разных браузеров это делается разными методами. Хотя конечно может сейчас в этом отношении и достигли едиобразия... хотя зная MS сомнительно :D
Согласия безусловно нет, но можно использовать примерно такой метод:
Код:
Или написать функцию:
Код:
function addHandler(obj, ev, func)
{
if(obj.attachEvent)
obj.attachEvent('on'+ev, func);
else if(obj.addEventListener)
obj.addEventListener(ev, func, false);
else
obj['on'+ev] = func;
}
{
if(obj.attachEvent)
obj.attachEvent('on'+ev, func);
else if(obj.addEventListener)
obj.addEventListener(ev, func, false);
else
obj['on'+ev] = func;
}
Правда возможны проблемы с объектом event, но они тоже решаемы.
http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo
Effect.Appear - то, что вы пытаетесь сделать. Прикрутить этот эффект к движению мышки - 1 минута работы.
Effect.Appear - то, что вы пытаетесь сделать. Прикрутить этот эффект к движению мышки - 1 минута работы.
Цитата:
Effect.Appear - то, что вы пытаетесь сделать. Прикрутить этот эффект к движению мышки - 1 минута работы.
Т.е., Вы предлагаете, вместо функции размером 600 байт прикрутить библиотеку размером 100 килобайт?
Вот так присоединил событие к документу:
[HTML]if (/*@cc_on 1 | @*/ 0){
document.attachEvent('onmouseover',eff)}
else{
document.addEventListener('mouseover',eff, false)}[/HTML]
Было бы лучше присоединить событие только к изображениям, но я не могу придумать как это сделать. Строка такого вида document.images.attachEvent не работает,
document.images().attachEvent - тоже.
И можно ли как нибудь, в обработчике проверить тип объекта(принадлежит ли он к изображениям)?
Пробую так:
[HTML]function eff(i,e){
alert(i.tipe)
}[/HTML]
не понимает "type".
[HTML]if (/*@cc_on 1 | @*/ 0){
document.attachEvent('onmouseover',eff)}
else{
document.addEventListener('mouseover',eff, false)}[/HTML]
Было бы лучше присоединить событие только к изображениям, но я не могу придумать как это сделать. Строка такого вида document.images.attachEvent не работает,
document.images().attachEvent - тоже.
И можно ли как нибудь, в обработчике проверить тип объекта(принадлежит ли он к изображениям)?
Пробую так:
[HTML]function eff(i,e){
alert(i.tipe)
}[/HTML]
не понимает "type".
2AKS. В спецификации его нет, но он во всю используется.
Я не знаток JS, я предлагаю вараинты, какими бы я пользовался в РНР. C JS я работаю через фреймворк и не заморачиваюсь сильно.
Я не знаток JS, я предлагаю вараинты, какими бы я пользовался в РНР. C JS я работаю через фреймворк и не заморачиваюсь сильно.
Цитата: Ghirik
Вот так присоединил событие к документу:
[HTML]if (/*@cc_on 1 | @*/ 0){
document.attachEvent('onmouseover',eff)}
else{
document.addEventListener('mouseover',eff, false)}[/HTML]
[HTML]if (/*@cc_on 1 | @*/ 0){
document.attachEvent('onmouseover',eff)}
else{
document.addEventListener('mouseover',eff, false)}[/HTML]
Есть смысл написать одну функцию на "все случаи жизни", чем каждый раз "пропуcкать" движок через условия:
Код:
var addEventHandler = function (s) {
if (window.addEventListener) {
s = 'o.addEventListener(e, f, !!b)';
} else if (window.attachEvent) {
s = 'o.attachEvent("on" + e, f)';
};
return Function('o, e, f, b', s);
}('');
if (window.addEventListener) {
s = 'o.addEventListener(e, f, !!b)';
} else if (window.attachEvent) {
s = 'o.attachEvent("on" + e, f)';
};
return Function('o, e, f, b', s);
}('');
Цитата: Ghirik
И можно ли как нибудь, в обработчике проверить тип объекта(принадлежит ли он к изображениям)?
Пробую так:
[HTML]function eff(i,e){
alert(i.tipe)
}[/HTML]
не понимает "type".
Код:
if (i.tagName == 'img') // true, если это изображение
Спасибо, буду пробовать...
Всё!!! Не могу больше...: :eek: :)
Неполучается!!!
Помогите, пожалуйста.
Уже как только не пробовал получить доступ к объекту вызвавшему событие. Как из события получить объект внутри обработчика?
Так захватываю события.
[HTML]if (/*@cc_on 1 | @*/ 0){
document.attachEvent('onmouseover',eff)}
else{
document.addEventListener('mouseover',eff, false)}[/HTML]
А как получить объект или id в функции eff()
У меня как то получилось получить в IE и то уже не помню как, горе, короче, горе...:mad: Весь Интернет прочитал...:)
Неполучается!!!
Помогите, пожалуйста.
Уже как только не пробовал получить доступ к объекту вызвавшему событие. Как из события получить объект внутри обработчика?
Так захватываю события.
[HTML]if (/*@cc_on 1 | @*/ 0){
document.attachEvent('onmouseover',eff)}
else{
document.addEventListener('mouseover',eff, false)}[/HTML]
А как получить объект или id в функции eff()
У меня как то получилось получить в IE и то уже не помню как, горе, короче, горе...:mad: Весь Интернет прочитал...:)
Вот кроссбраузерная версия:
Код:
<span id="you-see-my-id">Нажми меня</span>
<script>
function handler(obj,e)
{
// obj - элемент.
// e - событие.
alert(obj.id);
}
function installHandler(el,ev,func)
{
var h = function (e)
{
var obj;
if(window.event) {
e = window.event;
obj = e.srcElement;
} else {
obj = e.target;
}
return func(obj,e);
};
if(el.attachEvent) {
el.attachEvent('on'+ev, h);
} else if(el.addEventListener) {
el.addEventListener(ev, h, false);
} else {
el['on'+ev] = h;
}
}
installHandler(document,'click',handler);
</script>
<script>
function handler(obj,e)
{
// obj - элемент.
// e - событие.
alert(obj.id);
}
function installHandler(el,ev,func)
{
var h = function (e)
{
var obj;
if(window.event) {
e = window.event;
obj = e.srcElement;
} else {
obj = e.target;
}
return func(obj,e);
};
if(el.attachEvent) {
el.attachEvent('on'+ev, h);
} else if(el.addEventListener) {
el.addEventListener(ev, h, false);
} else {
el['on'+ev] = h;
}
}
installHandler(document,'click',handler);
</script>
Цитата: Ghirik
Было бы лучше присоединить событие только к изображениям, но я не могу придумать как это сделать.
Возьмем пример посложнее:
var tmp = node.getElementsByTagName('li');
for(var i = 0; i < tmp.length; i++){
tmp.onclick = function(num){
return function() {
alert(num);
}
}(i);
}
Код выбирает все элементы li узла node. Каждому элементу скрипт добавляет обработчик события onclick. Обработчик выводит номер своего элемента.
Взял кусок статьи: Нетривиальный синтаксис , возможно поможет
В тему: http://www.tigir.com/opacity.htm , я даже хотел однажды использовать написанный там код.
Всем большое спасибо, буду рзбираться....
P.S. skywalker, я, собственно, от автора этой статьи и заразился эффектами, особенно мне нравится, как унего решено претекание цвета.
P.S. skywalker, я, собственно, от автора этой статьи и заразился эффектами, особенно мне нравится, как унего решено претекание цвета.
Вот, благодаря вашей помощи, я научился подключать события.:)
3 Вариант.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
var img=document.getElementsByTagName('img')
for(c=0;c<img.length;c++){
img[c].src='img/'+(c+1)+'.jpg'
img[c].onmouseover=eff
img[c].onmouseout=eff
if (img[c].filters){
img[c].style.filter='alpha(opacity='+s+')'}
else{
img[c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=10 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function eff(e){
var i=this.id
if (timer){clearInterval(timer)}
if (!e){e=window.event}
if ((e.type)!='mouseover'){z=y;var t=dn}
else{z=x;var t=up}
timer=setInterval(function (i){return function(){ time(i)}}(this),t)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1>
<img id=i2>
<img id=i3>
<img id=i4>
</body>
</html>[/HTML]
Не смог красиво вписать назначение обработчика, хотелось чтобы прямо в цикле было записано одной строчкой. Типа такого:
[HTML]img[c].onmouseover=function(){return eff(img[c],'mouseover')}
img[c].onmouseout=function(){return eff(img[c],'')}[/HTML]
Но при такой записи теряется объект. Если в цикле создавать переменную и приравнивать ей объект img[c], то тогда передается объект, но, понятно, последний из цикла. Подскажите, как правильно записать.
Как красиво смотрятся тэги с одним ID!!!
3 Вариант.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">
<!--
function ok(){ //Функция начальной установки прозрачности.
var img=document.getElementsByTagName('img')
for(c=0;c<img.length;c++){
img[c].src='img/'+(c+1)+'.jpg'
img[c].onmouseover=eff
img[c].onmouseout=eff
if (img[c].filters){
img[c].style.filter='alpha(opacity='+s+')'}
else{
img[c].style.opacity=s/100}}}
// Временные единицы относительные, подбирать экспериментально.
var up=10 // Время выполнения эффекта, появление.
var dn=15 // Время выполнения эффекта, исчезновение.
var s=10 // Начальная прозрачность, от 0.
var r=100 // Конечная прозрачность, до 100.
/*----------------------------------------------------------------*/
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function eff(e){
var i=this.id
if (timer){clearInterval(timer)}
if (!e){e=window.event}
if ((e.type)!='mouseover'){z=y;var t=dn}
else{z=x;var t=up}
timer=setInterval(function (i){return function(){ time(i)}}(this),t)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}else{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}else{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body onload=ok()>
<img id=i1>
<img id=i2>
<img id=i3>
<img id=i4>
</body>
</html>[/HTML]
Не смог красиво вписать назначение обработчика, хотелось чтобы прямо в цикле было записано одной строчкой. Типа такого:
[HTML]img[c].onmouseover=function(){return eff(img[c],'mouseover')}
img[c].onmouseout=function(){return eff(img[c],'')}[/HTML]
Но при такой записи теряется объект. Если в цикле создавать переменную и приравнивать ей объект img[c], то тогда передается объект, но, понятно, последний из цикла. Подскажите, как правильно записать.
Как красиво смотрятся тэги с одним ID!!!
Разобрался...
Нужно было так записывать:
[HTML]img[c].onmouseover=function(i){return function(){eff(i,'mouseover')}}(img[c])
img[c].onmouseout=function(i){return function(){eff(i,'')}}(img[c])[/HTML]
В предыдущем посту исправил.
Нужно было так записывать:
[HTML]img[c].onmouseover=function(i){return function(){eff(i,'mouseover')}}(img[c])
img[c].onmouseout=function(i){return function(){eff(i,'')}}(img[c])[/HTML]
В предыдущем посту исправил.
А почему бы не записать так:
?
Код:
img[c].onmouseover = eff;
img[c].onmouseout = eff;
img[c].onmouseout = eff;
?
Цитата:
А почему бы не записать так:
Код:
img[c].onmouseover = eff;
img[c].onmouseout = eff;
?
Код:
img[c].onmouseover = eff;
img[c].onmouseout = eff;
?
А так, я не могу достать объект внутри обработчика (не знаю как).
Я, конечно, хочу записать, как можно проще. В идеале, было бы хорошо передавать в функцию только событие или объект, а уже там доставать недостающие части. Мне, для работы этой функции, нужно два параметра - объект и событие. Если Вы знаете как такое сделать, подскажите, пожалуйста.
Цитата: Ghirik
Мне, для работы этой функции, нужно два параметра - объект и событие.
Установите обработчики событий так, как я показал. В функции eff ключевое слово this будет указывать на объект (изображение в данном случае), на котором произошло событие. А само событие будет передано первым параметром в функцию (в IE первого параметра не будет, поэтому используйте window.event)...
Спасибо, сделал так:
[HTML]function eff(e){
var i=this.id
if (timer){clearInterval(timer)}
if (!e){e=window.event}
if ((e.type)!='mouseover'){z=y;var t=dn}
else{z=x;var t=up}
timer=setInterval(function(){return time(this)},t)}[/HTML]
Но теперь незнаю как передать объект дальше, в функцию time().:)
Так не работает.
[HTML]function eff(e){
var i=this.id
if (timer){clearInterval(timer)}
if (!e){e=window.event}
if ((e.type)!='mouseover'){z=y;var t=dn}
else{z=x;var t=up}
timer=setInterval(function(){return time(this)},t)}[/HTML]
Но теперь незнаю как передать объект дальше, в функцию time().:)
Так не работает.
Цитата: Ghirik
Но теперь незнаю как передать объект дальше, в функцию time().:)
Код:
var caller = this;
timer = setInterval(function () { return time(caller); }, t);
timer = setInterval(function () { return time(caller); }, t);
Я так пробовал, с таким кодом, в функцию time() передается "object Window", а не обрабатываемый.
Простой пример (проверьте):
Код:
window.onload = function () {
document.body.onclick = function () {
var caller = this; // Create a pointer to the <body>
window.setTimeout(function () { return test(caller); }, 1000);
};
};
function test(o) {
alert(o.tagName); // "BODY", of course!
};
document.body.onclick = function () {
var caller = this; // Create a pointer to the <body>
window.setTimeout(function () { return test(caller); }, 1000);
};
};
function test(o) {
alert(o.tagName); // "BODY", of course!
};
Цитата: Ghirik
Я так пробовал, с таким кодом, в функцию time() передается "object Window", а не обрабатываемый.
Значит что-то не так делаешь. И вообще лучше сразу в функцию передать объект через this, ибо зачем плодить лишние переменные если они потом все равно не используются.
Цитата: alekciy
И вообще лучше сразу в функцию передать объект через this, ибо зачем плодить лишние переменные если они потом все равно не используются.
Что значит "передать объект через this"? И о каких "лишних переменных" идет речь?
Цитата: AKS.
Что значит "передать объект через this"? И о каких "лишних переменных" идет речь?
Цитата:
var caller = this;
timer = setInterval(function () { return time(caller); }, t);
Я имел ввиду в том духе, что сразу делать time(this), но сейчас вспомнил, что в данной задачи ни какого фреймоврка не используется, значит экземпляров класса нет.
Поэтому в данном случае объект так и нужно дальше передавать по цепочке:
Код:
onclick="eff(this)"
....
function eff(e){
......
time(e)
......
....
function eff(e){
......
time(e)
......
Цитата: alekciy
Код:
onclick="eff(this)"
Вот эта строчка будет работать?
Вот так:
timer=setInterval('time('+this.id+')',t)}
заработало.
Везде внес изменения.
Всем спасибо.
timer=setInterval('time('+this.id+')',t)}
заработало.
Везде внес изменения.
Всем спасибо.