第一百四十四节，JavaScript，列队动画
JavaScript，列队动画
将上一节的，移动透明动画，修改成可以支持列队，也就是可以给这个动画方法多个动画任务，让它完成一个动画任务后，在执行第二个动画任务
原理：
就是在原有的动画方法里加一个回调函数，当动画执行完毕后执行回调函数，再在回调函数里写入动画任务去执行，实现列队动画
/** yi_dong_tou_ming()方法，说明
* * yi_dong_tou_ming()方法，将一个元素，进行一下动画操作
* 1，x将元素横向左移动或者右移动
* 2, y将元素竖向上移动或者下移动
* 3，w将元素动画增加或者减少宽度
* 4，h将元素动画增加或者减少高度
* 5，o将元素动画增加或者减少透明度
* *************************************
* x将元素横向左移动或者右移动，首先将目标设置定位，position:absolute;
* o将元素动画增加或者减少透明度，结合css里元素原始透明度filter: alpha(opacity=0);opacity: 0;
* *************************************
* yi_dong_tou_ming()方法，参数说明
* 参数是一个对象如下
* yi_dong_tou_ming({
'attr':'x', 【为动画方式】， x.为横向移动，y.为竖向移动，w.为增加宽度动画，h.为增加高度动画，o.为透明度动画，【必填】
'type':'1', 【动画模式】， 0.匀速模式，1.缓冲模式【可选，默认缓冲】
'speed':6, 【缓冲速度】， 动画模式为缓冲时设置，【可选，默认为6】,以此值改变跨度.每一次动画动态增加或者减少，实现缓冲效果 'start':50, 【动画起始位置】， 起始的像素或者透明度【可选，默认为对象原始位置】
注意：动画起始位置，一般按钮动画使用，如果是鼠标触动动画，会不停的初始化，因为鼠标一动就改变了动画起始位置 'target':100, 【目标量】， 就是在原始的像素或者透明度上，增加或者减少到目标量的像素或者透明度【可先，注意目标量不填，增量必填】
'alter':50, 【增量】， 就是在对象原始的像素或者透明度上，增加或者减少像素或者透明度【可先，注意增量不填，目标量必填】
'step':7, 【跨度】， 每一次动画增加或者减少的，像素或者透明度,【可选，默认20】
't':50 【每次动画时间】， 也就是多少毫秒执行一次动画【可选，默认10】
fn:function () { 【每次动画时间】， 回调函数，用于动画执行完毕后执行函数，在回调函数里在写入动画，就是列队动画，也就是一个动画执行完毕后执行第二个动画 }
});
**/
feng_zhuang_ku.prototype.yi_dong_tou_ming = function (obj) {
for (var i = 0; i < this.jie_dian.length; i++) {
var element = this.jie_dian[i];
// attr，为动画方式，
// x.为横向移动
// y.为竖向移动
// w.为增加宽度动画
// h.为增加高度动画
// o.为透明度动画
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
obj['attr'] == 'o' ? 'opacity' : 'left'; // start.为动画起始位置，
// 如果输入了动画起始位置，值就为输入的起始位置，移动动画是像素值（如100），透明度动画是透明度百分比（如50）
// 如果没输入，默认移动动画获取的对象原始像素位置，透明度动画获取的对象原始透明度，除以100等于原始透明度百分比
var start = obj['start'] != undefined ? obj['start'] :
attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
parseInt(getStyle(element, attr)); // t.为每次动画时间，也就是多少毫秒执行一次动画
// 不传默认，是10毫秒执行一次动画
var t = obj['t'] != undefined ? obj['t'] : 10; // step.为跨度，每一次动画增加或者减少的，像素或者透明度
var step = obj['step'] != undefined ? obj['step'] : 20; // alter.为增量，就是在对象原始的像素或者透明度上，增加或者减少像素或者透明度
var alter = obj['alter']; // target.为目标量，就是在原始的像素或者透明度上，增加或者减少到目标量的像素或者透明度
// 注意，增量，是在原始上增加或者减少多少，目标量是在原始的基础上增加或者减少到目标
var target = obj['target']; // speed.为缓冲速度，动画模式为缓冲时，以此值改变step.每一次动画动态增加或者减少，实现缓冲效果
// 不传，默认为6
var speed = obj['speed'] != undefined ? obj['speed'] : 6; // type.为动画模式，匀速为匀速模式，缓冲为缓冲模式
// 不传，默认为缓冲模式
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined) {
throw new Error('alter增量或target目标量必须传一个！');
}
if (start > target) step = -step;
if (attr == 'opacity') {
element.style.opacity = parseInt(start) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(start) + ')';
} else {
element.style[attr] = start + 'px';
}
clearInterval(element.timer); //给对每个象创建定时器并停止定时器
element.timer = setInterval(function () { //将对象下的定时器开启
if (type == 'buffer') {
step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
(target - parseInt(getStyle(element, attr))) / speed;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
}
if (attr == 'opacity') {
if (step == 0) {
setOpacity();
} else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
setOpacity();
} else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
setOpacity();
} else {
var temp = parseFloat(getStyle(element, attr)) * 100;
element.style.opacity = parseInt(temp + step) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
}
} else {
if (step == 0) {
setTarget();
} else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
setTarget();
} else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
setTarget();
} else {
element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
}
}
//document.getElementById('aaa').innerHTML += step + '<br />';
}, t);
function setTarget() {
element.style[attr] = target + 'px';
clearInterval(element.timer);
if (obj.fn != undefined)obj.fn(); //判断如果传入了回调函数，动画执行完毕后执行回调函数
}
function setOpacity() {
element.style.opacity = parseInt(target) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
clearInterval(element.timer);
if (obj.fn != undefined)obj.fn(); //判断如果传入了回调函数，动画执行完毕后执行回调函数
}
}
return this;
};
html代码
<div id="liedui">列队动画</div>
css代码
#liedui{
width: 100px;
height: 100px;
background-color: #ff340e;
position: absolute;
top: 100px;
left: 100px;
}
前台js代码
//列队动画
$('#liedui').on_click(function () {
var _this = this;
$(_this).yi_dong_tou_ming({ //先执行这第一个动画
'attr': 'w', //动画模式
'target': 500, //目标量
'step': 7, //跨度
't': 50, //每次动画时间
fn: function () { //等待第一个动画执行完毕后，再在动画回调函数里执行第二个动画
$(_this).yi_dong_tou_ming({
'attr': 'h', //动画模式
'target': 200, //目标量
'step': 7, //跨度
't': 50 //每次动画时间
});
}
});
});
PS：对于多个动画冲突导致终止问题，是因为只采用了一个定时器，我们可以对每个动画分配一个定时器即可解决。
/** yi_dong_tou_ming()方法，说明
* * yi_dong_tou_ming()方法，将一个元素，进行一下动画操作
* 1，x将元素横向左移动或者右移动
* 2, y将元素竖向上移动或者下移动
* 3，w将元素动画增加或者减少宽度
* 4，h将元素动画增加或者减少高度
* 5，o将元素动画增加或者减少透明度
* *************************************
* x将元素横向左移动或者右移动，首先将目标设置定位，position:absolute;
* o将元素动画增加或者减少透明度，结合css里元素原始透明度filter: alpha(opacity=0);opacity: 0;
* *************************************
* yi_dong_tou_ming()方法，参数说明
* 参数是一个对象如下
* yi_dong_tou_ming({
'attr':'x', 【为动画方式】， x.为横向移动，y.为竖向移动，w.为增加宽度动画，h.为增加高度动画，o.为透明度动画，【必填】
'type':'1', 【动画模式】， 0.匀速模式，1.缓冲模式【可选，默认缓冲】
'speed':6, 【缓冲速度】， 动画模式为缓冲时设置，【可选，默认为6】,以此值改变跨度.每一次动画动态增加或者减少，实现缓冲效果 'start':50, 【动画起始位置】， 起始的像素或者透明度【可选，默认为对象原始位置】
注意：动画起始位置，一般按钮动画使用，如果是鼠标触动动画，会不停的初始化，因为鼠标一动就改变了动画起始位置 'target':100, 【目标量】， 就是在原始的像素或者透明度上，增加或者减少到目标量的像素或者透明度【可先，注意目标量不填，增量必填】
'alter':50, 【增量】， 就是在对象原始的像素或者透明度上，增加或者减少像素或者透明度【可先，注意增量不填，目标量必填】
'step':7, 【跨度】， 每一次动画增加或者减少的，像素或者透明度,【可选，默认20】
't':50 【每次动画时间】， 也就是多少毫秒执行一次动画【可选，默认10】
fn:function () { 【每次动画时间】， 回调函数，用于动画执行完毕后执行函数，在回调函数里在写入动画，就是列队动画，也就是一个动画执行完毕后执行第二个动画 }
});
**/
feng_zhuang_ku.prototype.yi_dong_tou_ming = function (obj) {
for (var i = 0; i < this.jie_dian.length; i++) {
var element = this.jie_dian[i];
// attr，为动画方式，
// x.为横向移动
// y.为竖向移动
// w.为增加宽度动画
// h.为增加高度动画
// o.为透明度动画
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
obj['attr'] == 'o' ? 'opacity' : 'left'; // start.为动画起始位置，
// 如果输入了动画起始位置，值就为输入的起始位置，移动动画是像素值（如100），透明度动画是透明度百分比（如50）
// 如果没输入，默认移动动画获取的对象原始像素位置，透明度动画获取的对象原始透明度，除以100等于原始透明度百分比
var start = obj['start'] != undefined ? obj['start'] :
attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
parseInt(getStyle(element, attr)); // t.为每次动画时间，也就是多少毫秒执行一次动画
// 不传默认，是10毫秒执行一次动画
var t = obj['t'] != undefined ? obj['t'] : 10; // step.为跨度，每一次动画增加或者减少的，像素或者透明度
var step = obj['step'] != undefined ? obj['step'] : 20; // alter.为增量，就是在对象原始的像素或者透明度上，增加或者减少像素或者透明度
var alter = obj['alter']; // target.为目标量，就是在原始的像素或者透明度上，增加或者减少到目标量的像素或者透明度
// 注意，增量，是在原始上增加或者减少多少，目标量是在原始的基础上增加或者减少到目标
var target = obj['target']; // speed.为缓冲速度，动画模式为缓冲时，以此值改变step.每一次动画动态增加或者减少，实现缓冲效果
// 不传，默认为6
var speed = obj['speed'] != undefined ? obj['speed'] : 6; // type.为动画模式，匀速为匀速模式，缓冲为缓冲模式
// 不传，默认为缓冲模式
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined) {
throw new Error('alter增量或target目标量必须传一个！');
}
if (start > target) step = -step;
if (attr == 'opacity') {
element.style.opacity = parseInt(start) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(start) + ')';
} else {
element.style[attr] = start + 'px';
}
clearInterval(element.timer); //给对每个象创建定时器并停止定时器
element.timer = setInterval(function () { //将对象下的定时器开启
if (type == 'buffer') {
step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
(target - parseInt(getStyle(element, attr))) / speed;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
}
if (attr == 'opacity') {
if (step == 0) {
setOpacity();
} else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
setOpacity();
} else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
setOpacity();
} else {
var temp = parseFloat(getStyle(element, attr)) * 100;
element.style.opacity = parseInt(temp + step) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
}
} else {
if (step == 0) {
setTarget();
} else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
setTarget();
} else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
setTarget();
} else {
element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
}
}
//document.getElementById('aaa').innerHTML += step + '<br />';
}, t);
function setTarget() {
element.style[attr] = target + 'px';
clearInterval(element.timer);
if (obj.fn != undefined)obj.fn(); //判断如果传入了回调函数，动画执行完毕后执行回调函数
}
function setOpacity() {
element.style.opacity = parseInt(target) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
clearInterval(element.timer);
if (obj.fn != undefined)obj.fn(); //判断如果传入了回调函数，动画执行完毕后执行回调函数
}
}
return this;
};
第一百四十四节，JavaScript，列队动画的更多相关文章
- 第三百四十四节，Python分布式爬虫打造搜索引擎Scrapy精讲—craw母版l创建自动爬虫文件—以及 scrapy item loader机制
第三百四十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—craw母版l创建自动爬虫文件—以及 scrapy item loader机制 用命令创建自动爬虫文件 创建爬虫文件是根据scrap ...
- 第一百四十五节，JavaScript，同步动画
JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...
- 第一百一十四节，JavaScript文档对象，DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- 第一百四十三节，JavaScript，利用封装库做百度分享
JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...
- 第一百四十八节，封装库--JavaScript，菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- 第三百八十四节，Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册
第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...
随机推荐
- cocos2d-x 托付模式的巧妙运用——附源代码（二）
转载请注明出处:http://blog.csdn.net/hust_superman/article/details/38292265,谢谢. 继上一篇将了托付类的详细实现后.这篇来将一下怎样在游戏中 ...
- MySQL的GRANT命令（创建用户）
本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 (删除用户与删除权限:drop user '用户名 ...
- ant Select 联动
1.代码 /** * 选择监区 组件 */ import React, { PureComponent } from 'react'; import PropTypes from 'prop-type ...
- 在linux下的使用复制命令cp，不让出现“overwrite”（文件覆盖）提示的方法。（转）
在linux下的使用复制命令cp,不让出现“overwrite”(文件覆盖)提示的方法. 一般我们在使用cp命令时加上-f选项,希望不让出现“overwrite”的提示(文件覆盖的提示).如:# cp ...
- hibernate 一对多双向
package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import javax.persistenc ...
- JConsole的使用手册 JDK1.5（转）
一篇Sun项目主页上介绍JConsole使用的文章,前段时间性能测试的时候大概翻译了一下以便学习,今天整理一下发上来,有些地方也不知道怎么翻,就保留了原文,可能还好理解点,呵呵,水平有限,翻的不好,大 ...
- 用squid配置代理服务器（基于Ubuntu Server 12.04）
怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ 1. 安装squid $sudo apt-get install squid -y 注: ...
- sql server使用sql插入中文字符串乱码问题
在插入语句前加N就行了 sb.Append(string.Format("update chapter set [content]=N'{0}' where Id ={1} ;", ...
- 堆越界--coredump 在malloc函数里
一,可执行程序分析: objdump -h xxx,可以看到程序内部各个段的内存分布,结果如下(部分): 26 .data 0000016c 0000000000879d20 0 ...
- C#面试基础问题0
传入某个属性的set方法的隐含参数的名称是什么?value,它的类型和属性所声名的类型相同. 如何在C#中实现继承?在类名后加上一个冒号,再加上基类的名称. C#支持多重继承么?不支持.可以用接口来实 ...