例：
放大一个div
<html>
<head>
<title>改变大小</title>
<style>
#test{width:50px; height:20px; background:#f00}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
Readkid.onload = function() {
Readkid.motion.tween(document.getElementById('test'), 1, {width:300, height:150});
}
</script>
</head>
<body>
看不到效果请刷新一下
<div id="test"></div>
</body>
</html>
通过更改ease参数可以更改缓动的方式
<html>
<head>
<title>改变大小</title>
<style>
#test{width:50px; height:20px; background:#f00}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
Readkid.onload = function() {
Readkid.motion.tween(document.getElementById('test'), 1, {width:300, height:150, ease:Readkid.motion.ease.Bounce.easeOut});
}
</script>
</head>
<body>
看不到效果请刷新一下
<div id="test"></div>
</body>
</html>
让一个div淡入淡出
<html>
<head>
<title>淡入淡出</title>
<style>
#test{width:300px; height:200px; background:#f00;filter:alpha(opacity=0); opacity:0}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
Readkid.onload = function() {
Readkid.motion.tween(document.getElementById('test'), 1, {alpha:1, onComplete: function() {
Readkid.motion.tween(document.getElementById('test'), 1, {alpha:0});
}});
}
</script>
</head>
<body>
看不到效果请刷新一下
<div id="test"></div>
</body>
</html>
颜色滤镜可以更改容器的前景色与背景色
把body背景颜色变成红色
<html>
<head>
<title>改变背景色</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
Readkid.onload = function() {
Readkid.motion.tween(document.body, 1, {bgColor:0xFF0000});
}
</script>
</head>
<body>
看不到效果请刷新一下
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
