JS动画效果_学习笔记

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

JS动画效果

最热最新

慕粉3355164 03:34

运动框架

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-07-08
Jinezxcv

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

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-07-06
喵斗酱

完美运动框架：json

查看全部

0 采集收起来源：完美运动框架
2016-07-03
喵斗酱

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

查看全部

0 采集收起来源：获取样式
2016-07-03
寻找灵魂的犬居 08:20

缓冲运动当涉及到运算时，一定要做判断，否则容易出错。选中的代码第二行：判断速度speed是否大于0，大于0则向上取整，小于0则向下取整

查看全部

0 采集收起来源：JS缓冲动画
2016-07-03
寻找灵魂的犬居 08:18

透明度选中代码中，第一行用于ie，第二行用于火狐

查看全部

0 采集收起来源：JS透明度动画
2016-07-03
寻找灵魂的犬居 07:56

透明度第一个用于ie，第二个用于火狐

查看全部

0 采集收起来源：JS透明度动画
2016-07-03
寻找灵魂的犬居 15:17

一个函数中，传入值越少越好，精简不必要的传入值。

查看全部

0 采集收起来源：JS速度动画
2016-07-02
寻找灵魂的犬居 12:26

移入移出显示效果当两个函数相似重复时，删减一个函数，用定义值代入。

查看全部

0 采集收起来源：JS速度动画
2016-07-02
心似一片青苔

//加fn是为了演示链式动画 function startMove(obj,attr,Target,fn){ clearInterval(obj.timer); obj.timer = setInterval( function(){ //取当前属性的值 var cur = 0; if(attr =='opacity'){ cur = Math.round(parseFloat(getStyle(obj,attr)*100)); //能让范围回到0~100 } else{ cur = parseInt(getStyle(obj,attr)); } //会有缓冲的效果 var speed = (Target - cur)/ 8 ; // 解决speed不能取到两个边界值的bug speed = speed >0?Math.ceil(speed):Math.floor(speed); if(cur == Target){ clearInterval(obj.timer); if(fn){ fn(); } } else{ if(attr == 'opacity'){ //firefox浏览器 obj.style.opacity = (cur + speed)/100; //IE浏览器 obj.style.filter = 'alpha:(opacity:'+(cur+speed)+')'; } else{ obj.style[attr] = cur + speed +'px'; } } } ,30) } }

查看全部

0 采集收起来源：JS链式动画
2018-03-22
慕粉yazhou

var json={name,key}

查看全部

0 采集收起来源：完美运动框架
2016-07-01
慕粉yazhou

让物体同时运动需要用到 json

查看全部

0 采集收起来源：同时运动
2016-07-01
qq_ICouldBeTheO_0 09:37

获取样式

查看全部

0 采集收起来源：获取样式
2016-07-01
fannyxj

1、过程：obj.stlye.width是样式中的块width；而obj.offsetWidth（offsetxxx的bug）是显示的width(包括border之类的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度； 2、用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即：用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用（IE）currentStyle和（火狐）getComputedStyle获取css的非行间样式（效果等价于刚刚用style.xxx获取的效果）； 3、var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”（如果不是伪类，设置为null）。 4、在用到obj.offsetWidth或者obj.offsetHeight的时候，如果，obj对象的样式有border等属性，则需要用getStyle()函数解决实际width和height值样式不兼容的问题。 //获取style样式（关键代码） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } 5、obj.style[attr]=icur+speed+'px';（推荐使用，因为style.attr不支持变量连接符）

查看全部

0 采集收起来源：获取样式
2018-03-22
AGhosts 09:37

有边框时，获取样式执行代码

查看全部

0 采集收起来源：获取样式
2016-06-30