当前位置:首页 > 日记 > 正文

一个简单的例子,通过本地js实现jQuery函数动画()动画效果

一个简单的例子,通过本地js实现jQuery函数动画()动画效果
在公司一个月的实践之后,CSS和HTML是相互熟悉的。这些天,js已经被研究,JS的动画功能今天已经写了。我认为jQuery不是万能的,因为它是一个框架,所以有些东西是死的。就像动画函数一样,没有太多的可选参数。有时,他们可能没有达到预期的效果。 U3000 U3000
部分注释是用来测试的,而且编写代码的过程不是很顺利,因为js通常使用得不是很精细,一般都是知道方法,也是用的,但是直到实时动画实现错误的功能时,所有的小细节都可能被难住。

函数中有几个参数来解释它。

Obj,一个函数对象

JSON在{属性:值的数值形式,属性:值},,这里是运动属性对象的动画

间隔,每次执行更改间隔时,对象都是属性值。

sp,值转换的速度,使得动画具有缓冲效应,而不仅仅是恒定速度(sp 1)。

FN、回调函数、动画执行后的行为

代码很简单,只需注意几个细节,这里提醒一下:

一个对象的属性没有被宣布直接,所以这个函数的第一句话是这样(obj。定时器);它不犯错误。

我们必须为每个对象添加一个计时器,否则它将相互影响。一个定时器的共同使用的结果是多个对象卡顿的运动。

儿子的数据格式明白,当对象的动画属性走过,你需要长!{是} = JSON来确定每个属性已经达到目标值。旗帜的作用是防止clearInterval(obj。定时器)从清理计时器时,其中一个属性达到目标值,和其他动画属性没有达到目标值。所以当我们遍历每个时间,我们初始化的标志值为true。只要我们遇到一个没有达到目标属性的目标,我们就将标志设置为false,直到对象的所有属性到达目标值并清除计时器为止。

速度=速度> 0 math.ceil(速度):Math.floor(速度);

这句话是属性值舍入的作用,因为除了不透明度外,没有十进制属性值。

最后,在调用时要注意动画对象。当你使用for循环,你不能随意使用ARR {我}的形式。特别是当嵌套循环时,i的值成为最大值。

js
动画函数(obj,JSON,间隔,SP,FN){
ClearInterval(obj。定时器);
0;
var j = 0;
功能getstyle(obj,ARR){
如果(obj。currentstyle){
返回的对象。currentstyle {是}; / / IE
{人}
返回document.defaultview.getcomputedstyle(obj,null){是};
}
}
obj.timer = setInterval(){()函数(

var标志=真;
对于(VAR ARR JSON){
VaR长= 0;

如果(ARR = =不透明度){
长= math.round(parseFloat(getstyle(obj,ARR))* 100);
{人}
长= parseInt(getstyle(obj,ARR));
}
速度=(JSON { ARR } -长)×SP;
速度=速度> 0 math.ceil(速度):Math.floor(速度);
如果(长!= { }){ JSON数组
标志=假;
}
如果(ARR = =不透明度){
obj.style.filter =α(透明度(长+速度):' + ');
obj.style.opacity =(长+速度) / 100;
{ }人
obj。风格{ ARR } =长+速度+PX;
}
/ / console.log(J +
}

如果(标志){
ClearInterval(obj。定时器);
/ / console.log(J +:+标志);
/ / console.log(k+ K);
/ / console.log(=+ J);
/ / console.log(做);
如果(FN){
(FN);
}
}
},区间);
}
调用模式:
无功动= document.getelementbyid(移动),GetElementsByTagName(李);
对于(var i = 0;i < move.length;i++){
移动{我}。onmouseover =函数(){
无功_this =这;
动画(_this,{宽度:500,高度:200 },10,0.01,函数()){
动画(_this,{宽度:300,高度:200 },10,0.01);
});

}
}

上述原生js实现了一个简单的例子,jQuery的动画函数()的动画效果,这是所有萧边分享你的内容。我希望能给你一个参考,我希望你会得到很多支持。

相关文章

PS是怎样做梦幻烟火的

PS是怎样做梦幻烟火的

烟火,的是,梦幻,是怎样,电脑软件,PS教程如何绘制一张烟花绽放效果图,希望能对你有所帮助。 软件名称:Adobe PS图象处理软件8全绿色中文版软件大小:150.1mb更新时间:2015-11-04 1。新建一个图层,使用定义的笔刷绘制焰火的形状。 2。使用滤镜>变…

PS图象处理软件简单地下载图标

PS图象处理软件简单地下载图标

图标,下载,图象,处理软件,简单,本教程主要是与大家分享PS图象处理软件的简单方法让下载的图标。教程产生的效果非常好,难度也不是很大。值得学习和推荐。让我们一起学习。 设计素描 方法/步骤 1,打开ps,新建一个文件,颜色白,大小自行确定, 2、…

的例子来说明夯在处理80w数据暂时

的例子来说明夯在处理80w数据暂时

数据,例子,现象,电脑软件,最近,当对一百万个数据的业务表进行称重时,再次手术被篡改。 1。查询业务表的容量,并查看总共超过200个W条目。 SQL select count(*)>从tb_bj_banker_etl; 二百五十五万二千三百八十一 2。查询表中应该删除的重复数据…

MySQL暗示InnoDB功能被禁用,需要打

MySQL暗示InnoDB功能被禁用,需要打

解决方案,暗示,功能,电脑软件,MySQL,The example of this article analyzes the solution that MySQL prompts The InnoDB feature is disabled to open InnoDB.Share for you for your reference, the following: 首先,问题: 数据错误报告…

启动Excel内置的Powerpivot服务

启动Excel内置的Powerpivot服务

服务,启动,电脑软件,Powerpivot,Excel,对于很多用户来说,往往可以在工作簿中的数据透视表结构,和多维数据的分析计算,或需要使用工作组网站和文档管理功能来存储信息和与同事合作,在过去一般需要下载和安装PowerPivot add-on.however,如果您使用…

PS制作漂亮的星光笔刷

PS制作漂亮的星光笔刷

星光,笔刷,漂亮,电脑软件,PS,今天,小编辑分享PS分享漂亮的星星笔刷方法,教程比较基础,推荐,希望对你有帮助! 步 1,新建一个50×50像素的文档,用于绘制星光,如下图,当然,参数可以改变,但这只是一个画笔,而画笔不需要这么大。 2。窗口mdash;mdash;刷(把画…

由于PS图象处理软件独特的微信表达

由于PS图象处理软件独特的微信表达

图象,处理软件,独特,电脑软件,PS,你想有一个独特的微信表情PS图象处理软件DIY微信表情栏的使用,以下是详细的介绍给你,看看吧! 步: 1、首先,我们打开PS,然后建立一个200×200像素板,微信表情不能太大,200像素几乎。 2。然后创建一个新层,我们将在…

MySQL5.6的压缩版安装配置方法教程

MySQL5.6的压缩版安装配置方法教程

教程,安装配置,方法,压缩版,电脑软件,希望你喜欢mysql的windows解压版配置和安装本教程,同时也希望能帮你成功安装mysql。 1、MySQL的安装文件分为两种,一个是MSI格式,另一个是zip格式。如果MSI格式可以直接点击安装,提示安装它按照给定的安装…

方法建立文本倒置效应反映CSS3的盒

方法建立文本倒置效应反映CSS3的盒

效应,文本,方法,盒子,电脑软件,Grammar: CSS代码将内容复制到剪贴板。 反映:没有|盒 以上=左下方放| | | = | 没有= | | | | | 默认值:无 应用于:所有元素 继承:没有 价值: 没有:没有反射 演示:WebKit看到简单的图片倒置 上图:指定的反转图像位于对…

增加excel撤销次数

增加excel撤销次数

次数,电脑软件,excel,1、点击windows开始按钮,然后单击运行;在开放式;;;在框中输入regedit单击确定按钮;;,打开注册表编辑器窗口;。 2。在左窗格中,展开;hkey_current_user 软件微软办公室 12 options Excel;分支。Ldquo;12.0Excel 2007对应的注册表键;…

WPS2010禁止自动编号

WPS2010禁止自动编号

自动编号,电脑软件,默认情况下,软件的自动编号功能是开放的,功能强大,它可以使您的文档编辑工作更快,但有时会导致编号混乱。 临时禁令:当编辑一个文件,当软件自动编号,如果你按下Ctrl + z键取消操作,自动编号会消失,而且功能将被禁止在任何时间当…

制作3D文字环绕地球的PS图象处理软

制作3D文字环绕地球的PS图象处理软

文字,3D,图象,处理软件,地球,跟我学计算机网络的今天,教会人们使用PS图象处理软件进行绕地球3D的话。首先看看下面的效果: 最终效果 地球材料 1,打开材料,使用椭圆选框工具画一个圆圈,并保持选区的选区。 2。转到路径面板并将选择更改为工作路…