JavaScript缓动库（2）

时间：2009-05-25 12:50:00　

例子：

放大一个div
<html><head><title>改变大小</title><style>#test{width:50px; height:20px; background:#f00}</style><script type="text/javascript" src="http://readkid.cn/js/readkid.js"></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="http://readkid.cn/js/readkid.js"></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="http://readkid.cn/js/readkid.js"></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背景颜色变成红色

把body文字颜色变成红色

<html><head><title>改变背景色</title><script type="text/javascript" src="http://readkid.cn/js/readkid.js"></script><script type="text/javascript">Readkid.onload = function() {Readkid.motion.tween(document.body, 1.5, {color:0xFF0000});}</script></head><body>看不到效果请刷新一下,看不到效果请刷新一下,看不到效果请刷新一下,看不到效果请刷新一下,看不到效果请刷新一下,看不到效果请刷新一下,看不到效果请刷新一下<br />看不到效果请刷新一下<br />看不到效果请刷新一下</body></html>

你可以强制停止缓动
传递一个布尔值参数来指定缓动对象是在当前状态下停止还是停止在结束状态

<html><head><title>停止缓动</title><style>#test{width:50px; height:20px; background:#f00}</style><script type="text/javascript" src="http://readkid.cn/js/readkid.js"></script><script type="text/javascript">Readkid.onload = function() {var tween = Readkid.motion.tween(document.getElementById('test'), 3, {width:600, height:350});Readkid("#b1").addListener("click", function(e) {tween.kill(false);}); Readkid("#b2").addListener("click", function(e) {tween.kill(true);});}</script></head><body>看不到效果请刷新一下<br /><a href="#" id="b1">单击页面停止缓动，对象停止在当前状态</a><br /><a href="#" id="b2">单击页面停止缓动，对象停止在结束状态</a><br /><div id="test"></div></body></html>

第一页上一页 1

标签：库,移动,缓动,JavaScript

投稿

JavaScript缓动库（2）

猜你喜欢

python3实现字符串的全排列的方法(无重复字符)

基于Vue实现图书管理功能

sqlserver复制数据库的方法步骤(图文)

MSSQL数据库排序规则如何更改

spyder快捷键与python符号化输出方式

ASP.net与SQLite数据库通过js和ashx交互（连接和操作）

python数据分析基础知识之shape()函数的使用教程

Python基于Tkinter开发一个爬取B站直播弹幕的工具

PyTorch实现图像识别实战指南

Python with关键字，上下文管理器，@contextmanager文件操作示例

JavaScript实现的伸展收缩型菜单代码

Django处理多用户类型的方法介绍

Python爬虫HTPP请求方法有哪些

python调用函数、类和文件操作简单实例总结

IE 下 href 的 BUG

python飞机大战pygame游戏框架搭建操作详解

在 Windows 下搭建高效的 django 开发环境的详细教程

如何创建第一个Pygame程序

Python基于SMTP发送邮件的方法

Python Queue模块详解