JS动画效果_学习笔记

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

JS动画效果

最热最新

慕前端4408879

IE 上的兼容 CSS中 filter:alpha(opacity:30); odiv.style.filter = 'alpha(opacity:' + speed + ')';

查看全部

0 采集收起来源：JS透明度动画
2015-04-15
kzzk 08:41

定时器：setInterval()； speed=(iTarget-oDiv.offsetLeft)/20 speed= speed>0?Math.cell(speed):Math.floor(speed);

查看全部

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

<script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startOpacity(100); }; oDiv.onmouseout = function(){ startOpacity(30); }; }; var alpha = 30; var timer = 0; function startOpacity(opac){ var oDiv = document.getElementById("div1"); clearInterval(timer); var speed = 0; timer = setInterval(function(){ if(alpha > opac){ speed = -10; }else if(alpha < opac){ speed = 10; }else{ clearInterval(timer); } alpha+=speed; oDiv.style.filter = alpha+"(opacity:"+alpha+")"; oDiv.style.opacity = alpha / 100; },30); } </scrip

查看全部

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

window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }

查看全部

0 采集收起来源：JS速度动画
2018-03-22
kzzk 03:32

GOOd

查看全部

0 采集收起来源：JS动画效果课程介绍
2015-04-12
letre

parseInt

查看全部

0 采集收起来源：任意属性值（一）
2015-04-08
雨中的鱼L

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

查看全部

0 采集收起来源：获取样式
2015-04-03
ecmadao 09:03

js中get Obj的style

查看全部

0 采集收起来源：获取样式
2015-03-30
JackChow 08:31

速度取整判断

查看全部

0 采集收起来源：JS缓冲动画
2015-03-26
未曾回眸

mmbb

查看全部

0 采集收起来源：JS速度动画
2015-03-22
不幻

opacity: 0.5;!!!!!!!!!!!!!!!!!!!w3c透明度 filter:alpha(opacity:50); ie透明度

查看全部

0 采集收起来源：JS透明度动画
2015-03-21
禾木 04:14

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

查看全部

0 采集收起来源：完美运动框架
2015-03-21
禾木

if(opac == val){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = "alpha(opacity:"+(opac + speed)+")"; obj.style.opacity = (opac + speed)/100; }else{ obj.style[attr] = opac + speed + 'px'; } }

查看全部

0 采集收起来源：JS链式动画
2018-03-22
禾木

window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,'width',400,function(){ startMove(oDiv,'height',400,function(){ startMove(oDiv,'opacity',100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,'height',200,function(){ startMove(oDiv,'opacity',30,function(){ startMove(oDiv,'width',200) }) }); }; };

查看全部

0 采集收起来源：JS链式动画
2018-03-22
禾木

function startMove(obj,attr,val){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var opac = 0; if(attr == 'opacity'){ //Math.round()将一个数四舍五入为一个最接近的整数 opac = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ opac = parseInt(getStyle(obj,attr)); } var speed = (val - opac) / 8; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(opac == val){ clearInterval(obj.timer); }else{ if(attr == 'opacity'){ obj.style.filter = "alpha(opacity:"+(opac + speed)+")"; obj.style.opacity = (opac + speed)/100; }else{ obj.style[attr] = opac + speed; } } },30); }

查看全部

0 采集收起来源：任意属性值（二）
2018-03-22