这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 运动框架的第五部分,链式运动到完美运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出! 之前的模型是:
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>
- 运动框架(五):链式运动到完美运动
- </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);
- }
来源: http://www.phperz.com/article/17/0531/335298.html