JavaScript运动框架(五):链式运动到完美运动
来源:互联网 发布:大数据对护理的影响 编辑:程序博客网 时间:2024/04/29 22:53
基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出!
之前的模型是:
startMove(obj, json);
现在改为:
startMove(obj, json, fn);
也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj, json, fn),再在里面的fn中调用startMove(obj, json, fn),可以一直玩下去
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>运动框架(5五):链式运动到完美运动</title> <style type="text/css"> div { width: 100px; height: 100px; background: orange; margin: 10px; float: left; } </style></head><body> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { startMove(oDiv, {width:300,opacity:30}, function() { startMove(oDiv, {height:500}); }); }; oDiv.onmouseout = function() { startMove(oDiv, {height:100}, function() { startMove(oDiv, {width:100,opacity:100}); }) }; function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (var attr in json) { var cur = 0; if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } if (cur != json[attr]) { bStop = false; } var speed = (json[attr] - cur)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); cur += speed; if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur/100; } else { obj.style[attr] = cur + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) fn(); } }, 30); } </script></body></html>
最后提取出来的完美运动框架如下,motionFrame.js:
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; }}function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (var attr in json) { var cur = 0; if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } if (cur != json[attr]) { bStop = false; } var speed = (json[attr] - cur)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); cur += speed; if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur/100; } else { obj.style[attr] = cur + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) fn(); } }, 30);}
阅读全文
0 0
- JavaScript运动框架(五):链式运动到完美运动
- 完美运动(链式运动)JS框架
- JavaScript - 完美运动框架
- javascript完美运动框架
- js运动-完美运动框架
- JS链式运动框架
- 链式运动框架
- 链式运动框架
- 链式运动框架
- JavaScript之链式运动
- (43)JS运动之链式运动框架
- 链式运动实例 运动框架应用 微博
- JS 运动框架2 链式运动
- js运动技术--链式运动框架
- js运动-链式运动
- JS 运动框架(3) 完美运动框架
- js运动框架完美运动框架
- JS完美运动框架
- 趣谈unicode,ansi,utf-8,unicode big endian这些编码有什么区别
- Nginx比Apache高效的原理
- eclipse打包APK的时候conversion to dalvik format failed with error 1
- Ubuntu14.04上编译指定版本的protobuf源码操作步骤
- MyEclipse 2015 反编译插件安装
- JavaScript运动框架(五):链式运动到完美运动
- U-Mail自建企业邮箱域名解析设置
- "ORA-00942: 表或视图不存在 "的原因和解决方法
- Base64
- UIGestureRecognizer 及自定义手势
- NPOI使用手册
- HTML input 选择图片转成base64编码
- MATLAB之图片简单处理
- C#实现网络传输数据加密