JavaScript运动框架之多值运动的示例分析-创新互联

这篇文章主要介绍JavaScript运动框架之多值运动的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联是专业的鄞州网站建设公司,鄞州接单;提供成都网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行鄞州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

多值运动,也就是对于某个对象来说,不仅仅只是其中一个属性值在变化,而是好多个,比如宽,高,字体,透明度等等同时变化

当然了,多值运动会产生一个问题,就是定时器何时关闭的问题!当然是所有的属性值都运动到目标值了才能清理定时器,也就是等最慢的。就好比十个人一起聚餐,不能等到来一个人就开吃!

前几篇讲的都是一个元素对象中某一个属性的运动,这次讲同一个元素对象中多个属性值的缓冲运动,那么每个属性都有个终点(目标点),我们把这些属性及其目标值写成一个对象的形式,或者是json状!容易产生的问题就是上面说的,这里用了共同的速度函数,但有的属性值从100 –> 101, 有的属性值从100 –> 600,你得等耗时最长的属性值到达目标值才能关闭该obj所拥有的定时器,设计的思路就是每次执行轮询函数设置一个bStob = true;在遍历扫描json中属性的时候,只要有没到到目标值的属性,就设为false,这样定时器就不会关闭,即使有的属性值已经到达终点,此时轮询依旧会执行扫描,只不过此时该属性运动速度为0了,也不会运动了。也就是之前:

if(attr == cur) {
 cleartInterval(obj.timer);
}

要增强为:

if (bStop) {
 clearInterval(obj.timer);
}



 
 运动框架(四):多值运动
 
 div {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;
 }
 


 
   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);  }  

JavaScript运动框架之多值运动的示例分析

以上是“JavaScript运动框架之多值运动的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:JavaScript运动框架之多值运动的示例分析-创新互联
文章路径:http://azwzsj.com/article/cdhipg.html

其他资讯