多值运动,也就是对于某个对象来说,不仅仅只是其中一个属性值在变化,而是好多个,比如宽,高,字体,透明度等等同时变化
当然了,多值运动会产生一个问题,就是定时器何时关闭的问题!当然是所有的属性值都运动到目标值了才能清理定时器,也就是等最慢的。就好比十个人一起聚餐,不能等到来一个人就开吃!
前几篇讲的都是一个元素对象中某一个属性的运动,这次讲同一个元素对象中多个属性值的缓冲运动,那么每个属性都有个终点(目标点),我们把这些属性及其目标值写成一个对象的形式,或者是 json 状!容易产生的问题就是上面说的,这里用了共同的速度函数,但有的属性值从 100 –> 101, 有的属性值从 100 –> 600,你得等耗时最长的属性值到达目标值才能关闭该 obj 所拥有的定时器,设计的思路就是每次执行轮询函数设置一个 bStob = true; 在遍历扫描 json 中属性的时候,只要有没到到目标值的属性,就设为 false,这样定时器就不会关闭,即使有的属性值已经到达终点,此时轮询依旧会执行扫描,只不过此时该属性运动速度为 0 了,也不会运动了。也就是之前:
- if(attr == cur) {
- cleartInterval(obj.timer);
- }
要增强为:
- if (bStop) {
- clearInterval(obj.timer);
- }
- <!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() {
- var json = {
- width: 600,
- height: 200,
- opacity: 30
- };
- startMove(this, json);
- };
- oDiv.onmouseout = function() {
- var json = {
- width: 100,
- height: 100,
- opacity: 100
- };
- startMove(this, json);
- };
- function getStyle(obj, attr) {
- if (obj.currentStyle) {
- return obj.currentStyle[attr];
- } else {
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj, json) {
- 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));
- }
- var speed = (json[attr] - cur) / 10;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if (cur != json[attr]) { //凡是有未到达目标点的,一律不让定时器停下,否则有的属性不能到达目标值
- bStop = false;
- }
- if (attr === 'opacity') {
- cur += speed;
- obj.style.filter = 'alpha(opacity:' + cur + ')';
- obj.style.opacity = cur / 100; //Chrome,IE
- } else {
- obj.style[attr] = cur + speed + 'px';
- }
- }
- //整个循环结束后,仍然保持着true,说明没有没到达目标值的属性,也就是都到了
- if (bStop) {
- clearInterval(obj.timer); //说明所有的属性都到达了目标值
- }
- },
- 30);
- }
- </script>
- </body>
- </html>
来源: http://www.jb51.net/article/114015.htm