javascript 45种缓动效果 非常酷_javascript技巧
程序员文章站
2022-05-21 15:10:28
...
参数 | 类型 | 说明 |
---|---|---|
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 | 可选,在结束时执行。 |
'; }).join('') + ' '; demo.innerHTML = grid + graph; var indicator = _("indicator"), marker = _("marker"), label = _("label"), demoTransition = function(pos){ var value = tween[ease](pos); indicator.style.display = "block"; marker.style.display = "block"; marker.style.left = Math.round(pos*200)+'px'; marker.style.bottom = Math.round((value*200-min)*factor)+'px'; label.innerHTML = Math.round(pos*200)+'px'; return value; } transition(indicator,{field:"left",begin:parseFloat(getCoords(demo).left),change:200, ease:demoTransition}) } window.onload = function(){ var panelHTML = function(){ var builder = []; var _temp = 'Back Circ Cubic Expo Quad Quart Quint Sine'.split(' '); var ease = _temp.map(function(v){ return 'easeIn'+v; }); ease = ease.concat(_temp.map(function(v){ return 'easeOut'+v; })); ease = ease.concat(_temp.map(function(v){ return 'easeInOut'+v; })); ease = ease.concat('blink bounce bouncePast easeFrom easeFromTo easeOutBounce easeTo elastic'.split(' ')); ease = ease.concat('flicker full linear mirror none pulse reverse sinusoidal spring swingTo swingFrom swingFromTo wobble'.split(' ')) for(var i =0,l=ease.length;i
上一篇: 【紧急求助】大图通过坐标获取小图后,小图上的边框怎么去掉?_html/css_WEB-ITnose
下一篇: js控制密码框展示提示信息,在谷歌浏览器中width和height属性没用_html/css_WEB-ITnose
推荐阅读
-
javascript中的缓动效果实现程序_javascript技巧
-
JS模拟酷狗音乐播放器收缩折叠关闭效果代码_javascript技巧
-
javascript中的缓动效果实现程序_javascript技巧
-
javascript 45种缓动效果 非常酷_javascript技巧
-
javascript 45种缓动效果 非常酷_javascript技巧
-
非常不错的一个JS分页效果代码,值得研究_javascript技巧
-
JS模拟酷狗音乐播放器收缩折叠关闭效果代码_javascript技巧
-
javascript简易缓动插件(源码打包)_javascript技巧
-
javascript学习笔记(1) 缓动效果显示隐藏div
-
非常不错的一个JS分页效果代码,值得研究_javascript技巧