<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}
</script>
<title>Sortable</title>
<script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript" ></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript" ></script>
</head>
<body>
<style>
</style>
使用delay加入延迟(delay为1)
<div id="ex1"></div>
<div id="moveDiv" style="background-color:red;width:150px;height:20px;">Click To Move</div>
<script>
String.prototype.setCodeStyle = function() {
return this.toString().replace(/[\r\n]+/g , '<br/>').replace(/\s/g , ' ');
}
</script>
<script id="s1">
$('moveDiv').observe('click' , function() {
new Effect.Move('moveDiv' , {
delay : 1,
x : 40 ,
y : 0
});
});
</script>
<script>
$('ex1').update($('s1').innerHTML.setCodeStyle());
</script>
使用queue选项 <br />
<ul>
<li>parallel 默认，立即开始</li>
<li>front 放在队列前面</li>
<li>end 放在队列后面</li>
<li>with-last 和队列中最后一个一起开始</li>
</ul>
<div id="ex2"></div>
<div id="moreDiv1" style="background-color:red;width:150px;height:20px;">moreDiv1</div>
<div id="moreDiv2" style="background-color:red;width:150px;height:20px;">moreDiv2</div>
<button id="start1">start</button>
<script id="s2">
$("start1").observe('click' , function() {
new Effect.Move('moreDiv1' , {
x : 40 ,
y : 0
});
new Effect.Move('moreDiv1' , {
x : 0 ,
y : 40,
queue : 'end'
});
new Effect.Move('moreDiv2' , {
x : 40 ,
y : 0,
queue : 'with-last'
});
});
</script>
<script>
$('ex2').update($('s2').innerHTML.setCodeStyle());
</script><br />
使用duration控制时间(默认为1，1秒)
<div id="ex3"></div>
<div id="moreDiv3" style="background-color:red;width:150px;height:20px;">Click To Move</div>
<script id="s3">
$('moreDiv3').observe('click' , function() {
new Effect.Move('moreDiv3' , {
x : 40,
y : 0,
duration : 3
});
});
</script>
<script>
$('ex3').update($('s3').innerHTML.setCodeStyle());
</script>
fps控制流畅度(默认为100)
<div id="ex4"></div>
<div id="moreDiv4" style="background-color:red;width:150px;height:20px;">moreDiv4</div>
<div id="moreDiv5" style="background-color:red;width:150px;height:20px;">moreDiv5</div>
<button id="start2">start</button>
<script id="s4">
$('start2').observe('click' , function() {
new Effect.Move('moreDiv4' , {
x : 40,
y : 0
});
new Effect.Move('moreDiv5' , {
x : 40,
y : 0,
fps : 20
});
});
</script>
<script>
$('ex4').update($('s4').innerHTML.setCodeStyle());
</script><br />
transition选项
<div id="ex5"></div>
<div id="moreDiv6" style="background-color:red;width:150px;height:20px;">moreDiv6</div>
<div id="moreDiv7" style="background-color:red;width:150px;height:20px;">moreDiv7</div>
<button id="start3">start</button>
<script id="s5">
$("start3").observe('click' , function() {
new Effect.Move('moreDiv6' , {
x : 40,
y : 0,
transition: Effect.Transitions.sinoidal
});
new Effect.Move('moreDiv7' , {
x : 40,
y : 0,
transition: Effect.Transitions.spring
});
});
</script>
<script>
$('ex5').update($('s5').innerHTML.setCodeStyle());
</script>
<br />
From 和 To
<div id="ex6"></div>
<div id="moreDiv8" style="background-color:red;width:150px;height:20px;">moreDiv8</div>
<div id="moreDiv9" style="background-color:red;width:150px;height:20px;">moreDiv9</div>
<button id="start4">start</button>
<script id="s6">
$("start4").observe('click' , function() {
new Effect.Opacity('moreDiv8' , {
from : 1,
to : 0.5
});
new Effect.Opacity('moreDiv9' , {
from : 1,
to : 0.2
});
});
</script>
<script>
$('ex6').update($('s6').innerHTML.setCodeStyle());
</script>
<br />
几个回调函数
<br />
beforeStart与beforeSetup一样，都是还没制定动画之前的操作。
afterSetup是制定了动画，第一帧触发之前做的操作。
beforeUpdate和afterUpdate是每一次更新开始和完成的时候，做的操作。
afterFinish是动画完成之后的操作
<div id="ex7"></div>
<div id="moreDiv10" style="position:relative;background-color:red;width:150px;height:20px;">Click To Move</div>
<script id="s7">
$('moreDiv10').observe('click' , function() {
new Effect.Move('moreDiv10' , {
x : 40,
y : 0,
beforeStart : function() {
//console.log(arguments);
//$('moreDiv10').setStyle({
// left : '-10px'
//});
},
beforeSetup : function() {
//console.log(arguments);
/*
$('moreDiv10').setStyle({
left : '-10px'
});
*/
},
afterSetup : function() {
//console.log(arguments);
$('moreDiv10').setStyle({
opacity : '0.5'
});
},
beforeUpdate : function() {
//console.log(arguments);
$('moreDiv10').setStyle({
opacity : '0.2'
});
},
afterUpdate : function() {
//console.log(arguments);
$('moreDiv10').setStyle({
opacity : '0.7'
});
},
afterFinish : function() {
//console.log(arguments);
}
});
});
</script>
<script>
$('ex7').update($('s7').innerHTML.setCodeStyle());
</script>
组队列 需要添加queue<br />
queue : {<br />
scope : '组队列id',<br />
position : 'end'<br />
};<br />
<div id="ex8"></div>
<div id="moreDiv11" style="position:relative;background-color:red;width:150px;height:20px;">moreDiv11</div>
<div id="moreDiv12" style="position:relative;background-color:red;width:150px;height:20px;">moreDiv12</div>
<div id="moreDiv13" style="position:relative;background-color:red;width:150px;height:20px;">moreDiv13</div>
<button id="start5">start</button>
<script id="s8">
$("start5").observe('click' , function() {
var fun = function(item) {
var options = {
scope : item.id,
position : 'end'
};
new Effect.Opacity(item , {
to : '0.1',
duration : 2,
queue : options
});
new Effect.Move(item , {
x : 50,
queue : options,
duration : 2
});
};
fun($('moreDiv11'));
fun($('moreDiv12'));
fun($('moreDiv13'));
});
</script>
<script>
$('ex8').update($('s8').innerHTML.setCodeStyle());
</script>
</body>
</html>
