第一百四十五节,JavaScript,同步动画

JavaScript,同步动画

 

将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成

 

原理:

 

向方法里添加一个属性,这个属性是一个对象,同步动画属性,属性值为对象,对象里面是,动画方式:目标量,组合的键值对,只能动画方式加目标量的键值对

 

/** yi_dong_tou_ming()方法,动态改变css属性说明* * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作* 1,x将元素横向左移动或者右移动* 2, y将元素竖向上移动或者下移动* 3,w将元素动画增加或者减少宽度* 4,h将元素动画增加或者减少高度* 5,o将元素动画增加或者减少透明度* 注意:也可以写其他css属性名称(全称),来动画增加或者减少css属性的数值,必须是值为数值的css属性,如:font-size* **************************************  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.为透明度动画,【必填】注意:也可以写其他css属性名称(全称),来动画增加或者减少css属性的数值,必须是值为数值的css属性,如:font-sizeo.为透明度动画,设置透明度动画时,必须先在css里设置初始透明度如:opacity:1;filter:alpha(opacity=100);否则IE9以下无法实现透明度动画'type':'1',        【动画模式】,     0.匀速模式,1.缓冲模式【可选,默认缓冲】'speed':6,         【缓冲速度】,     动画模式为缓冲时设置,【可选,默认为6】,以此值改变跨度.每一次动画动态增加或者减少,实现缓冲效果'start':50,        【动画起始位置】, 起始的像素或者透明度【可选,默认为对象原始位置】一般不需要传注意:动画起始位置,一般按钮动画使用,如果是鼠标触动动画,会不停的初始化,因为鼠标一动就改变了动画起始位置'target':100,      【目标量】,       就是在原始的像素或者透明度上,增加或者减少到目标量的像素或者透明度【可先,注意目标量不填,增量必填】'alter':50,        【增量】,         就是在对象原始的像素或者透明度上,增加或者减少像素或者透明度【可先,注意增量不填,目标量必填】'step':7,          【跨度】,         每一次动画增加或者减少的,像素或者透明度,【可选,默认20】'danwei':'em',     【属性值单位】     danwei.为属性值单位,也就是以什么单位来计算css属性,如是px还是em等,不传默认px't':50 ,           【每次动画时间】, 也就是多少毫秒执行一次动画【可选,默认10】fn:function () {   【回调函数,列队】, 回调函数,用于动画执行完毕后执行函数,在回调函数里在写入动画,就是列队动画,也就是一个动画执行完毕后执行第二个动画}mul:{              【同步动画对象】,用于同时要执行多个动画,同步动画属性,属性值为对象,对象里面是,动画方式:目标量,组合的键值对,只能动画方式加目标量的键值对同步动画,除了动画方式和目标量外,其他的都是在同步动画对象外设置,因为他们是统一的其他参数'w':101,'h':500,'o':30}});**/
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' : obj['attr'] != undefined ? obj['attr'] : '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;// danwei.为属性值单位,也就是以什么单位来计算css属性,如是px还是em等,不传默认pxvar danwei = obj['danwei'] != undefined ? obj['danwei'] : 'px';// alter.为增量,就是在对象原始的像素或者透明度上,增加或者减少像素或者透明度var alter = obj['alter'];// target.为目标量,就是在原始的像素或者透明度上,增加或者减少到目标量的像素或者透明度// 注意,增量,是在原始上增加或者减少多少,目标量是在原始的基础上增加或者减少到目标var target = obj['target'];//mul,接收的,obj对象里的mul属性,而mul属性是一个对象,由动画方式加目标量组合的键值对,也就是要同步动画的参数var mul = obj['mul'];    //接收同步动画(参数对象)// speed.为缓冲速度,动画模式为缓冲时,以此值改变step.每一次动画动态增加或者减少,实现缓冲效果// 不传,默认为6var 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 && mul == 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 + danwei;}if (mul == undefined){      //判断如果同步动画对象没有传,说明是单个动画mul = {};               //创建mul对象mul[attr] = target;     //将单个动画的,动画方式当作对象键,将目标量当作值,组合成键值对到对象里
        }clearInterval(element.timer);                            //给对每个象创建定时器并停止定时器element.timer = setInterval(function () {               //将对象下的定时器开启//创建一个布尔值,这个值可以了解对个动画是否执行完毕var flag = true;    //表示都执行完毕了//循环同步动画对象for (var i in mul) {attr = i == 'x' ? 'left' : i == 'y' ? 'top' :i == 'w' ? 'width' : i == 'h' ? 'height' :i == 'o' ? 'opacity' : i != undefined ? i : 'left';            //得到同步动画对象里的,动画方式target = mul[i];                                                       //得到同步动画对象里的,目标量
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) + ')';}//判断目标值不等于元素当前值,说明动画还没到达目标值,将flag修改成falseif (parseInt(target) !=  parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;} 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 + danwei;}//判断目标值不等于元素当前值,说明动画还没到达目标值,将flag修改成falseif (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;}}//判断flag = true;了说明元素的当前值已经达到目标值,可以停止定时器了if (flag) {clearInterval(element.timer);       //停止定时器if (obj.fn != undefined)obj.fn();   //判断如果传入了回调函数,动画执行完毕后执行回调函数,列队动画
            }}, t);function setTarget() {element.style[attr] = target + danwei;}function setOpacity() {element.style.opacity = parseInt(target) / 100;element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';}}return this;
};

 

html代码

<div id="ceshsdf">测试</div>

css代码

/*测试*/
#ceshsdf{width:100px;height: 100px;background-color: #ff340e;position: absolute;top: 100px;left: 100px;opacity:1;filter:alpha(opacity=100);
}

前台js代码

//测试$('#ceshsdf').on_click(function () {$('#ceshsdf').yi_dong_tou_ming({'t':30,'step':10,mul:{      //同步动画属性,属性值为对象,对象里面是,动画方式:目标量,组合的键值对,只能动画方式加目标量的键值对'w':500,'h':500,'o':30}});});

首先要引入函数库和封装库文件

转载于:https://www.cnblogs.com/adc8868/p/6416743.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255348.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Exchange Server 2016管理系列课件39.新建本地移动请求

场景通过新建本地移动请求&#xff0c;可以很方便的将用户邮箱从一个数据库迁移到另外一个数据库。1&#xff09;跨平台邮件迁移&#xff1b;&#xff08;低exchange迁移到高版本exchange&#xff09;2&#xff09;数据库平衡与优化&#xff1b;&#xff08;企业当中&#xff0…

【数据库学习】——【汇总】MySQL数据库下载与安装(Msi文件安装和免安装版本)、Navicat下载与安装

目录 1、MySQL数据库下载与安装 1&#xff09;MySQL数据库下载 MySQL官网 MySQL数据库下载 2&#xff09;MySQL 通过msi文件安装 3&#xff09;MySQL免安装版本使用 1&#xff09;将免安装包移动到安装的文件夹位置&#xff1b; 2&#xff09;新建data文件夹 3&#xff…

Val编程-文本操作

Val系统相对于高级语言来说&#xff0c;对于文本操作的功能相当的弱。 一般的文本&#xff08;文件夹&#xff09;操作有&#xff1a; 1.新建文本&#xff0c; 2.删除文本&#xff0c; 3.新建文件夹&#xff0c; 4.删除文件夹&#xff0c; 5.文本重命名&#xff0c; 6.文…

Linux高级编程--01.vi命令

VI是Linux/Unix下标配的一个纯字符界面的文本编辑器。由于不支持鼠标功能&#xff0c;也没有图形界面&#xff0c;相关的操作都要通过键盘指令来完成&#xff0c;需要记忆大量命令。因此很多人不大喜欢它&#xff0c;但同时由于键盘的方式往往比鼠标来得快&#xff0c;一旦熟练…

【数据库学习】——纠错:mysql Authentication plugin ‘caching_sha2_password‘ is not supported

目录 1、环境介绍 2、问题描述 3、原因分析 4、 解决方案 1&#xff09;方法一&#xff1a;直接改成mysql_native_password验证方式 2&#xff09;方案二&#xff1a; 利用sql命令将验证机制修改 ① 打开命令行窗口——cmd ② 登录mysql数据库 ③ 查看不同用户名的身份…

xcode中用pods管理第三方库转

安装pods &#xff1a;http://www.cnblogs.com/wangluochong/p/5567082.html 史上最详细的CocoaPods安装教程 --------------------------------------------- 第一步&#xff1a;Cmmand&#xff0b;空格&#xff0c;搜索"终端"&#xff0c;使用cd命令进入到我们项目…

Val编程-界面编程

由于示教盒是一个黑白的分辨率为&#xff08;14*40&#xff09;的液晶屏&#xff0c;用户交互不是很好&#xff0c;界面不友好。而且没有鼠标导航与触摸屏。 界面编程函数 1.void cls() 2.void title(string sText) 3.void put(string sText), void put(num nValue) 4.void put…

【机器学习笔记四】分类算法 - 逻辑回归

参考资料 【1】 Spark MLlib 机器学习实践 【2】 统计学习方法 1、Logistic分布 设X是连续随机变量&#xff0c;X服从Logistic分布是指X具有下列分布函数和密度函数 &#xff0c;。其中u为位置参数&#xff0c;γ为形状参数。如下图&#xff1a; 分布函数以(u,1/2)为中心…

FPFH+ICP点云配准

A, UniformSampling降噪B, ISS计算关键点, FPFH特征在FeatureCloud::setInputCloud中读入点云,并调用processInput进行处理:processInput处理包括: 1, computeSurfaceNormals () 使用NormalEstimation计算得到表面法向量2, computeLocalFeatures () FPFHEstimationKdTreeIS…

【python 学习】——pycharm终端解释器和Python解释器配置

目录 1、pycharm终端运行的时候前面带有PS&#xff0c;是什么意思&#xff0c;怎么变成cmd? 1&#xff09;File——settings 2&#xff09;tools——terminal——shellPath 2、pycharm怎么切换不同的Python解释器&#xff1f; 1&#xff09;File——settings 2&#xff09…

在linux下实现mysql自动备份数据

使用的系统为CentOS&#xff0c;mysql版本为5.6 备份功能主要利用以下功能实现&#xff1a; mysql命令中的mysqldump命令 linux下脚本编写 linux下crontab定时任务的使用 首先确定你要存放脚本的目录和存放备份数据的目录 首先进行以下修改&#xff08;因为在命令行或者脚本中写…

面向未来编程

我们一直以来都知道面向对象编程&#xff0c;面向过程编程。大多数时候还是面向工资编程&#xff0c;面向生活编程。面向任务编程&#xff0c;面向公司编程&#xff0c;面向领导编程。 工资不给力&#xff0c;心里认为委屈&#xff1b;生活有压力。影响工作情绪。任务完毕就好…

Plotclock

调试程序&#xff0c;运行调试程序&#xff0c;舵机会移动两只悬臂分别停留在一只水平另一只垂直的位置上。如果差距非常大&#xff0c;可拆下悬臂调节&#xff0c;如果比较接近了&#xff0c;就修改程序第3~6行的四个参数 SERVOFAKTORLEFT 左悬臂垂直位置&#xff0c;SERVOFAK…

js性能优化--学习笔记

《高性能网站建设进阶指南》&#xff1a; 1.使用局部变量&#xff0c;避免深入作用域查找&#xff0c;局部变量是读写速度最快的&#xff1b;把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法&#xff1b;比如for循环中的.length通常可以保存为局部变量。 …

struct和typedef struct在C与C++中用法

struct和typedef struct 分三块来讲述&#xff1a;   1 首先&#xff1a;//注意在C和C里不同     在C中定义一个结构体类型要用typedef:     typedef struct Student    {    int a;    }Stu;     于是在声明变量的时候就可&#xff1a;Stu stu1;(如…

【数据库学习】——Python实现mysql数据库SQL文件生成和导入

目录 1、将mysql数据导出到SQL文件中&#xff08;数据库存在的情况&#xff09; 2、将现有的sql文件数据导入到数据库中&#xff08;前提数据库存在&#xff09; 3、利用Navicat导出SQL文件和导入SQL文件 1&#xff09;从数据库导出SQL文件 2&#xff09;导入SQL文件到数据…

lfcp——PB使用

场景&#xff1a;记录以备忘。 1 直接说明 pb连接说明&#xff1a;目前项目共有性能、功能、业务、联调四个环境。所以pb可以连接四个不同的数据库。1.copy一份pb程序&#xff0c;修改main.ini文件中的DBCONNECT/DBCONNECT2位new&#xff0c;DBNAME/DBNAME2为oracle数据源中的源…

【重磅】Google官方推出了免费的、中文的、机器学习初级课程。

2019独角兽企业重金招聘Python工程师标准>>> 机器学习(Machine Learning, ML)是一门多领域交叉学科&#xff0c;涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。它是人工智能的核心&#xff0c;是使计算机具有智能的根本途径&#xff0c;其应用遍及…

市面上常见arduino版本比较

http://arduino.cc/en/Main/Products 详细链接 如果是入门&#xff0c;那么首选UNO R3&#xff0c;方便又省心 如果不是特殊要求&#xff0c;不建议购买2560&#xff0c;因为贵啊 nano是块很好的控制器&#xff0c;买不买随你咯 非特殊场合使用不建…

leetcode-114. Flatten Binary Tree to Linked List

Given a binary tree, flatten it to a linked list in-place. For example,Given 1/ \2 5/ \ \3 4 6The flattened tree should look like: 1\2\3\4\5\6思路&#xff1a;递归处理&#xff0c;引用二叉链表的思想&#xff0c;使用pre记录上一个分支的指针。Accepted Co…