PDA

Просмотр полной версии : MooTools Periodical - изменить сценарий выполнения

ufalog
19.10.2009, 04:20
после того как нажимаеш ссылку

start | stop - происходит выполнение скрипта ....


надо сделать так чтоб скрипт сразу выполнялся .. а не после того как нажмеш кнопку старт... :)
.js

var effect = $('box').effect('background-color', {duration: 800});
var periodical;

var fx = function() {
effect.start('#6684a0').chain(function() {
effect.start('#bcd965');
});
}

$('start').addEvent('click', function() {
fx();
periodical = fx.periodical(1700);
});

$('stop').addEvent('click', function() {
$clear(periodical);
});








.css





#box {
margin: 1em auto;
width: 200px;
height: 150px;
background: #bcd965;
border: 1px solid #000;
}





html




<h3>Periodical Effects</h3>
<a id="start" href="#">start</a> | <a id="stop" href="#">stop</a>

<div id="box"></div>
Byte_
19.10.2009, 13:14
var effect = $('box').effect('background-color', {duration: 800});
var periodical;

var fx = function() {
effect.start('#6684a0').chain(function() {
effect.start('#bcd965');
});
}

$('start').addEvent('click', function() {
fx();
periodical = fx.periodical(1700);
});

$('stop').addEvent('click', function() {
$clear(periodical);
});
window.onload = function(){fx();periodical = fx.periodical(1700);};

помоему так
ufalog
19.10.2009, 23:48
надо сделать так чтобы цвет начал мигать сразу.... ане после нажатия кнопки старт....




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>mootools demos - Periodical</title>

<link rel="stylesheet" type="text/css" media="screen" href="Periodical_files/style.css">

<script type="text/javascript" src="Periodical_files/mootools.js"></script>


<script type="text/javascript">




window.addEvent('domready', function(){
var effect = $('box').effect('background-color', {duration: 800});
var periodical;

var fx = function() {
effect.start('#6684a0').chain(function() {
effect.start('#bcd965');
});
}

$('start').addEvent('click', function() {
fx();
periodical = fx.periodical(1700);
});

$('stop').addEvent('click', function() {
$clear(periodical);
});
});

window.onload = function(){fx();periodical = fx.periodical(1700);};
</script>


</head><body>


<h3>Periodical Effects</h3>
<a id="start" href="#">start</a> | <a id="stop" href="#">stop</a>

<div id="box"></div>





</body></html>
Byte_
20.10.2009, 08:28
так и что?

$('start').addEvent('click', function() {
fx();
periodical = fx.periodical(1700);
});

вызывает при клике на кнопку старт 2 функции
window.onload = function(){fx();periodical = fx.periodical(1700);};
делает тоже самое
если я правильно понял как работает этот фреймворк, то можно так:
<script type="text/javascript">




window.addEvent('domready', function(){
var effect = $('box').effect('background-color', {duration: 800});
var periodical;

var fx = function() {
effect.start('#6684a0').chain(function() {
effect.start('#bcd965');
});
}

$('start').addEvent('click', function() {
fx();
periodical = fx.periodical(1700);
});

$('stop').addEvent('click', function() {
$clear(periodical);
});
fx();
periodical = fx.periodical(1700);
});
</script>
ufalog
21.10.2009, 11:58
ахха спасиб помог)))) :)