JS动画效果_学习笔记

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

JS动画效果

最热最新

GoingForward

var speed = (iTarget-oDiv.offsetLeft)/10; //如果速度是正的则向上取整。速度是负的向下取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

查看全部

0 采集收起来源：JS缓冲动画
2018-03-22
GoingForward 07:20

oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1）

查看全部

0 采集收起来源：JS透明度动画
2018-03-22
时光sun

aaaa

查看全部

0 采集收起来源：同时运动
2016-10-13
盛夏孤星 09:00

style的兼容性

查看全部

0 采集收起来源：获取样式
2016-10-13
qq_苏慕遮_24019744

主体 var div=document.getElementById('div1'); div.onmouseover=function(){ move(this,'width',400,function(){ move(div,'height',400,function(){ move(div,'opacity',100); }); }); } div.onmouseout=function(){ move(this,'opacity',30,function(){ move(div,'height',200,function(){ move(div,'width',200); }); }); } } var timer=null; var alpha=30; function move(obj,attr,iTarget,fn){ clearInterval(timer); timer=setInterval(function(){ var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getstyle(obj,attr))*100); }else{ icur=parseInt(getstyle(obj,attr)); } var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(timer); if(fn){ fn(); } } else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },50); }

查看全部

0 采集收起来源：JS链式动画
2018-03-22
littlegood3834007 03:35

实现思路

查看全部

1 采集收起来源：JS动画效果课程介绍
2016-10-12
慕函数7099457 06:50

缓冲 speed变量互决定变化量链式调用 fn 同步 json 很短的时间执行多个变化多个setinterval 的停止 this

查看全部

0 采集收起来源：jQuery动画案例
2016-10-12
慕函数7099457 15:11

Paste float会有浮动需Math.round

查看全部

0 采集收起来源：完美运动框架
2016-10-12
用指尖改变世界4062338

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1） } },30) }

查看全部

0 采集收起来源：JS透明度动画
2018-03-22
用指尖改变世界4062338

匀速运动特效的实现： 1、定时器的使用：①window.setInterval（function(){},time）间隔time毫秒数执行function()函数，函数体代码通过动态获取运动体的offsetleft（相对于父元素的左边距）设置运动体的style.left属性值，以达到匀速运动特效；②特别注意在设置定时器前需要清除定时器，以防止多次触发重复生成多个定时器。 2、当物体运动到指定的位置时，可以通过清除定时器使停止运动 3、与java代码优化思想一致《共享源码：随堂自测，详细备注，还有可以忽略的小bug,仅供参考，喜欢就点赞の》百度云地址 http://pan.baidu.com/s/1i54VvW5

查看全部

0 采集收起来源：JS速度动画
2016-10-11
用指尖改变世界4062338

js动画中有匀速和缓冲动画和透明度的变化: （一）匀速运动: 运动特效的实现，主要是通过定时器setInterval（）和clearInterval（）方法实现，在编程中，一要注意为防止计时器的叠加，叠加的效果就是速度不是匀速而是越来越快!所以开始都要清除一下定时器（二）透明度的变化:透明度的变化和匀速变化的编程代码类似（三）缓冲变化:注意由于是缓冲变化，所以在编写中的速度判断正负值，小于0要记得向下取整Math.floor（）和大于0向上取整Math.ceil（）（四）多个物体进行缓冲或者是透明度变化的时候，由于存在多个物体，所以为了指向当前所在的物体，实参使用this来视线，相对函数的形参使用obj来视线，当存在多个物体时，不能定义一个变量，这样子编辑器会产生争抢的情况，所以应该一个物体定义一个变量，即obj.attribute来实现。

查看全部

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

1、速度动画用定时器（注意定时器的清除） 2、position:relative;指相对于自己原本的位置偏移；position:absolute;指相对于父元素的定位 3、<span></span>是行内元素，要添加position或者display才能设置宽度和高度 4、设置圆角半径border-radius 5、元素运动的单位距离跟运动范围长度相关，距离为非整数时，单位距离设置成整数可能出现问题，要注意调整

查看全部

0 采集收起来源：JS速度动画
2018-03-22
慕斯8597481 06:43

用jQuery实现动画效果时间如果用数值，单位为毫秒，也可以用slow或者fast

查看全部

0 采集收起来源：jQuery动画案例
2016-10-08
慕斯8597481 00:16

用js实现动画效果

查看全部

0 采集收起来源：jQuery动画案例
2016-10-08
慕斯8597481

【bug】如果宽高透明度的改变程度不同，那么只要一个达到了效果就都停止了。原因：3、停止检测 if(iCur==json[attr]){ clearInterval(obj.timer); if(fn){ fn(); } } 【修改后】 var flag=true;//假设 if(iCur！=json[attr]){ flag=false; } ...该干嘛干嘛 if(flag){ clearInterval(obj.timer); if(fn){ fn(); } }

查看全部

0 采集收起来源：完美运动框架
2016-10-08