dojo学习笔记5.dojo特效
特效有：
1、淡入淡出（内置 dojo.fadeIn,dojo.fadeOut）
2、展开收缩（dojo.fx.wipeIn,dojo.fx.wipeOut）
3、滑动（dojo.fx.slideTo）
4、连续动画 （dojo.fx.chain)
5、同时动画 (dojo.fx.combine)
以下详细说明：
1、淡入淡出
淡出：dojo.fadeOut({node:...}).play();
淡入：dojo.fadeIn({node:...}).play();
演示HTML
<html>
<head>
<title></title>
<script src="script/dojo/dojo.js.uncompressed.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut"),
btnIn = dojo.byId("btnIn");
dojo.connect(btnOut, "onclick", function () {
dojo.fadeOut({ node: divNode }).play();
});
dojo.connect(btnIn, "onclick", function () {
dojo.fadeIn({ node: divNode }).play();
});
});
</script>
</head>
<body>
<button id="btnOut">淡出</button>
<button id="btnIn">淡入</button>
<div id="div1" style="width:200px;height:200px;background-color:blue">...</div>
</body>
<head>
<title></title>
<script src="script/dojo/dojo.js.uncompressed.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut"),
btnIn = dojo.byId("btnIn");
dojo.connect(btnOut, "onclick", function () {
dojo.fadeOut({ node: divNode }).play();
});
dojo.connect(btnIn, "onclick", function () {
dojo.fadeIn({ node: divNode }).play();
});
});
</script>
</head>
<body>
<button id="btnOut">淡出</button>
<button id="btnIn">淡入</button>
<div id="div1" style="width:200px;height:200px;background-color:blue">...</div>
</body>
</html>
2、展开收缩
dojo.require("dojo.fx")
收缩：dojo.fx.wipeOut({node:...}).play();
展开：dojo.fx.wipeIn({node:...}).play();
3、滑动
dojo.require("dojo.fx");
dojo.fx.slideTo({ node: ..., left: "200", top: "200" }).play();
两种特效事件说明
1)、播放前 beforeBegin
2)、播放后回调 onEnd
写法如下
var anim = dojo.fx.slideTo({node:...,,beforeBegin:function(){
...
}});
dojo.connect(anim,"onEnd",function(){
....
});
anim.play();
完整代码
<html>
<head>
<title></title>
<script src="script/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut"),
btnIn = dojo.byId("btnIn");
dojo.connect(btnOut, "onclick", function () {
var anim = dojo.fx.slideTo({ node: divNode, left: "600", top: "400", beforeBegin: function () {
this.node.style.backgroundColor = "lightblue";
}
});
dojo.connect(anim, "onEnd", function () {
this.node.style.backgroundColor = 'red';
})
anim.play();
});
dojo.connect(btnIn, "onclick", function () {
var anim = dojo.fx.slideTo({ node: divNode, left: "0", top: "50", beforeBegin: function () {
this.node.style.backgroundColor = "lightblue";
}
});
dojo.connect(anim, "onEnd", function () {
this.node.style.backgroundColor = 'blue';
})
anim.play();
});
});
</script>
</head>
<body>
<button id="btnOut">滑过去</button>
<button id="btnIn">滑过来</button>
<div id="div1" style="position:absolute;top:50px;left:0px;width:200px;height:200px;background-color:blue">...</div>
</body>
<head>
<title></title>
<script src="script/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut"),
btnIn = dojo.byId("btnIn");
dojo.connect(btnOut, "onclick", function () {
var anim = dojo.fx.slideTo({ node: divNode, left: "600", top: "400", beforeBegin: function () {
this.node.style.backgroundColor = "lightblue";
}
});
dojo.connect(anim, "onEnd", function () {
this.node.style.backgroundColor = 'red';
})
anim.play();
});
dojo.connect(btnIn, "onclick", function () {
var anim = dojo.fx.slideTo({ node: divNode, left: "0", top: "50", beforeBegin: function () {
this.node.style.backgroundColor = "lightblue";
}
});
dojo.connect(anim, "onEnd", function () {
this.node.style.backgroundColor = 'blue';
})
anim.play();
});
});
</script>
</head>
<body>
<button id="btnOut">滑过去</button>
<button id="btnIn">滑过来</button>
<div id="div1" style="position:absolute;top:50px;left:0px;width:200px;height:200px;background-color:blue">...</div>
</body>
</html>
4、连续动画
即：按顺序播放一组特效，写法如下：
dojo.fx.chain([
特效集合数组
]).play();
演示代码如下：
<html>
<head><title></title>
<script src="script/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut");
dojo.connect(btnOut, "onclick", function () {
dojo.fx.chain([
dojo.fx.slideTo({ node: divNode, left: "600", top:"50" }),
dojo.fx.slideTo({ node: divNode, left: "600", top: "400" }),
dojo.fx.slideTo({ node: divNode, left: "0", top : "400" }),
dojo.fx.slideTo({ node: divNode, left: "0", top: "50" })
]).play();
});
});
</script>
</head>
<body>
<button id="btnOut">滑右、滑下、滑左、归位</button>
<div id="div1" style="position:absolute;top:50px;left:0px;width:200px;height:200px;background-color:blue">...</div>
</body>
</html>
5、同时动画
写法：
dojo.fx.combine([
特效集合数组
]).play();
演示代码
<html>
<head>
<title></title>
<script src="script/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut"),
btnIn = dojo.byId("btnIn");
dojo.connect(btnOut, "onclick", function () {
dojo.fx.combine([
dojo.fx.slideTo({ node: divNode, left: "600", top: "400" }),
dojo.fadeOut({ node: divNode })
]).play();
});
dojo.connect(btnIn, "onclick", function () {
dojo.fx.combine([
dojo.fx.slideTo({ node: divNode, left: "0", top: "50" }),
dojo.fadeIn({ node: divNode })
]).play();
});
});
</script>
</head>
<body>
<button id="btnOut">闪过去</button>
<button id="btnIn">闪回来</button>
<div id="div1" style="position:absolute;top:50px;left:0px;width:200px;height:200px;background-color:blue">...</div>
</body>
<head>
<title></title>
<script src="script/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.ready(function () {
var divNode = dojo.byId("div1"),
btnOut = dojo.byId("btnOut"),
btnIn = dojo.byId("btnIn");
dojo.connect(btnOut, "onclick", function () {
dojo.fx.combine([
dojo.fx.slideTo({ node: divNode, left: "600", top: "400" }),
dojo.fadeOut({ node: divNode })
]).play();
});
dojo.connect(btnIn, "onclick", function () {
dojo.fx.combine([
dojo.fx.slideTo({ node: divNode, left: "0", top: "50" }),
dojo.fadeIn({ node: divNode })
]).play();
});
});
</script>
</head>
<body>
<button id="btnOut">闪过去</button>
<button id="btnIn">闪回来</button>
<div id="div1" style="position:absolute;top:50px;left:0px;width:200px;height:200px;background-color:blue">...</div>
</body>
</html>