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

2021-01-12 11:09

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

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