JS动画效果_学习笔记

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

JS动画效果

最热最新

爱读书的Iceberg

透明度的更改 window.onload=function(){ var oDiv=document.getElementById('div'); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } 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')'; oDiv.style.opactiy=alpha/100; }; }) } }

查看全部

0 采集收起来源：JS透明度动画
2018-03-22
D__C 06:37

JQuery动画

查看全部

0 采集收起来源：jQuery动画案例
2015-11-01
linvic

//最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

查看全部

1 采集收起来源：完美运动框架
2018-03-22
qiliu

跟智能社的一样……

查看全部

0 采集收起来源：JS链式动画
2015-10-31
qiliu

区别是：obj.style.width 是获取的content区的宽度，并且只能获取行内样式；而offsetWidth获取的是盒子宽度。例如： <div class="d"></div> .d{ width:200px; height:200px; border:10px #ccc solid; padding:10px; background:red; } d.offsetWidth = 200(content区宽度) + 10X2(两边的padding) + 10X2(两边的border) = 240 友情赠送另外一个：clientWidth d.clientWidth = 200(content区宽度) + 10X2(两边的padding) = 220

查看全部

0 采集收起来源：获取样式
2018-03-22
qiliu

获取样式，有两种方法： 1、dom.style.xxx 这种写法只能获取行内样式例如 <div ></div> div.style.width能获取到是200px，但是没有出现在引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 1 2 3 4 5 6 7 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }

查看全部

0 采集收起来源：获取样式
2018-03-22
D__C 07:26

JS取整函数： 1、向上取整：Math.floor(); 2、向下取整：Math.ceil();

查看全部

0 采集收起来源：JS缓冲动画
2015-10-31
喂喂喂不要这样

多物体运动的所有属性都不能公用

查看全部

0 采集收起来源：JS多物体动画
2015-10-30
LMUFC

获取样式，有两种方法： 1、dom.style.xxx 这种写法只能获取行内样式例如 <div ></div> div.style.width能获取到是200px，但是没有出现在引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }

查看全部

0 采集收起来源：获取样式
2018-03-22
Virture 03:29

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2015-10-27
良艺 11:34

ele.currentStyle[attribute]//chrome ele.getComputedStyle(obj, false)[attribute] //firfox

查看全部

0 采集收起来源：获取样式
2015-10-27
焦头烂额

用getEventListeners(obj)获取绑定在obj上的event

查看全部

0 采集收起来源：获取样式
2015-10-25
焦头烂额

获取对象的属性用getComputedStyle(obj, attr)方法, 兼容IE用obj.currentStyle[attr]; 如下： function getStyle(obj, attr) { if (obj.currentStyle) {// IE return obj.currentStyle[attr]; }else {// Firefox chrome return getComputedStyle(obj, false)[attr]; } }

查看全部

0 采集收起来源：获取样式
2015-10-25
三省吾身丶丶 09:34

获取样式的值

查看全部

0 采集收起来源：获取样式
2015-10-24
縌麟 06:53

$(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });

查看全部

0 采集收起来源：jQuery动画案例
2018-03-22