javascript 45种缓动效果非常酷

(编辑：jimmy 日期: 2025/5/11 浏览：3 次 )

参数类型说明 el element 必需，为页面元素 begin number 必需，开始的位置 change number 必需，要移动的距离 duration number 可选，缓动效果持续时间，默认是500ms。建议取300~1000ms。 field string 必需，要发生变化的样式属性。请在top，left，bottom,right，width与height中选择。 ftp number 可选，每秒进行多少帧动画，默认50帧，保证流畅播放。一些参考资料，日本动画1秒36帧，中国卡通24帧，赛车游戏60帧。 ease function 必需，缓动公式，参数为0~1之间的数。可参考我下面给出的45条公式。 onStart function 可选，在开始时执行。 onEnd function 可选，在结束时执行。prototype流派的缓动公式，只需一个参数（增至45种）

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> .taxiway{ width:800px; height:100px; background:#E8E8FF; } .move{ width:100px; height:100px; background:#a9ea00; } #panel { float:left; width:810px } #panel div{ float:left; width:88px; border:1px solid #333; height:20px; font-size:11px; } div.transition { margin-top: 30px; width: 200px; height: 200px; position: relative; margin-bottom:10px; } div.transition div { position: absolute; height: 1px; width: 1px; background: #000; } div.transition span { display: block; position: absolute; border-bottom: 1px solid #dadada; font-size: 10px; color: #888; width: 200px; left: 0px; } div.transition div#indicator { position:absolute; background-color:#a9ea00; height: 200px; top: 0px; left: 0px; } div.transition div#marker { background-color: #f00; height: 6px; width: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; left: 0px; margin-bottom: -3px; margin-left: -3px; } div.transition div#label { background: transparent; color: #ABD474; font-size: 20px; height: 20px; width: 200px; text-align: center; top: 80px; left: 0px; z-index: -1; } </style>  <title>缓动BY司徒正美</title> </head> <body>        <h2>请点击下表的格子</h2>   </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：javascript复制对象使用说明
下一篇：JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

javascript 45种缓动效果 非常酷

javascript 45种缓动效果非常酷