本文实例讲述了 JS 实现运动缓冲效果的封装函数分享给大家供大家参考, 具体如下:
之前经常写运动函数, 要写好多好多, 后来想办法封装起来 (运动缓冲)
- /*
- 物体多属性同时运动的函数
- obj: 运动的物体
- oTarget: 对象, 属性名为运动的样式名, 属性值为样式运动的终点值
- ratio: 速度的系数
- */
- function bufferMove(obj, oTarget, fn, ratio = 8) {
- clearInterval(obj.iTimer);
- obj.iTimer = setInterval(function() {
- // 此处设定开关 bBtn, 假设所有的属性均已运动完毕 true
- var bBtn = true;
- for (var sAttr in oTarget) {
- // 获取当前值, 此处兼容透明度的变化
- if (sAttr === 'opacity') {
- var iCur = parseFloat(getStyle(obj, sAttr) * 100);
- } else {
- var iCur = parseInt(getStyle(obj, sAttr));
- }
- // 计算速度, 此处可判定方向, 如向左或向右, 先透明后出现或先出现后透明等
- var iSpeed = (oTarget[sAttr] - iCur) / ratio;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- // 计算下一次的值
- var iNext = iCur + iSpeed;
- // 赋值给对应样式
- if (sAttr === 'opacity') {
- obj.style.opacity = iNext / 100;
- obj.style.filter = 'alpha(opacity=' + iNext + ')';
- } else {
- obj.style[sAttr] = iNext + 'px';
- }
- // 清除定时器, 当前的位置和终点值是否相等, 相等则说明结束
- if (iNext !== oTarget[sAttr]) {
- bBtn = false;
- }
- }
- // 如果 bBtn 的值为 true, 则说明所有的属性均已运动完毕, 回调函数 fn()
- if (bBtn) {
- clearInterval(obj.iTimer);
- if (fn) {
- fn();
- }
- }
- },
- 50);
- }
以上封装函数也可以用于单个属性, 多样式运动, 比如:
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就这样
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题: JavaScript 运动效果与技巧汇总 JavaScript 切换特效与技巧总结 JavaScript 查找算法技巧总结 JavaScript 动画特效与技巧汇总 JavaScript 错误与调试技巧总结 JavaScript 数据结构与算法技巧总结 JavaScript 遍历算法与技巧总结及 JavaScript 数学运算用法总结
希望本文所述对大家 JavaScript 程序设计有所帮助
来源: http://www.jb51.net/article/135136.htm