生鲜微信小程序开发_JavaScript运动框架 链式运动

摘要: JavaScript健身运动架构 链条式健身运动到极致健身运动(五) 本文关键详细介绍了JavaScript健身运动架构的第五一部分,链条式健身运动到极致健身运动,具备一定的参照使用价值...

JavaScript运动框架 链式运动到完美运动(五)       这篇文章主要介绍了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 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503