参数 类型 说明 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种） .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; } 缓动BY司徒正美 请点击下表的格子 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　基于jQuery实现的当离开页面时出现提示的实现代码

复制代码 代码如下://绑定beforeunload事件 $(window).bind('beforeunload',function(){ return '您输入的内容尚未保存，确定离开此页面吗？'; }); //解除绑定 $(window).unbind('beforeunload'); >>>详细阅读

本文标题：javascript 45种缓动效果 非常酷

地址：http://www.17bianji.com/kaifa2/JS/24480.html

 1/2    1