JS动画效果_学习笔记

首页免费课 JS动画效果笔记

JS动画效果

最热最新

梦想的天空

多物体运动 for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素多物体不要共用一个值,在对象上定义一个单独的属性保持值存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。

查看全部

0 采集收起来源：JS多物体动画
2016-01-13
小小小呀 09:30

获取样式

查看全部

0 采集收起来源：获取样式
2016-01-13
梦想的天空

1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 条件操作位这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
moji

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width 而width仅仅是自身的宽度

查看全部

0 采集收起来源：获取样式
2016-01-13
梦想的天空

运动框架实现思路 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-01-12
弱水微香

function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return obj.getComputedStyle(obj,false)[attr]; } }

查看全部

0 采集收起来源：获取样式
2016-01-12
浪里个浪2333 10:47

JS动画效果

查看全部

0 采集收起来源：JS动画案例
2016-01-11
Alice611

运动框架实现思路 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-01-10
dadaism

css定义（filter:alpha(opacity:30)）//ie opacity//非ie JS 改变： alpha+=speed IE：style.filter=‘alpha(opactiy:’+alpha+')' 非IE .style.opactiy=alpha/100（火狐或者chrome关于透明度的满值1，IE是100）

查看全部

0 采集收起来源：JS透明度动画
2016-01-10
陌熙

//之前老师的代码有一个小bug，解决后的代码 function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true; //标志所有运动是否到达目标值 for(var attr in json){ //取当前值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else { icur = parseInt(getStyle(obj,attr)); } //求速度 var speed = (json[attr]-icur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(icur != json[attr]){ flag = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }

查看全部

5 采集收起来源：JS动画案例
2018-03-22
陌熙

最后的move.js function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); var flag = true; //标志所有运动是否到达目标值 obj.timer = setInterval(function(){ for(var attr in json){ //取当前值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else { icur = parseInt(getStyle(obj,attr)); } //求速度 var speed = (json[attr]-icur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(icur != json[attr]){ flag = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag == true) { clearInterval(obj.timer); if(fn){ fn(); } } } },30); }

查看全部

0 采集收起来源：完美运动框架
2018-03-22
we_are伐木累o_0

多物体运动 for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素多物体不要共用一个值,在对象上定义一个单独的属性保持值存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。

查看全部

0 采集收起来源：JS多物体动画
2016-01-10
we_are伐木累o_0

1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数：向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 条件操作位这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
Finit 12:54

天啊！！！！高中数学的方程思想和函数思想啊，消元，利用变量之间的关系，消去变量

查看全部

0 采集收起来源：JS速度动画
2016-01-09
陌熙

链式运动其实就是一个运动结束，另一个运动开始，就像跑接力棒一样的

查看全部

0 采集收起来源：JS链式动画
2016-01-08