JS动画效果_学习笔记

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

JS动画效果

最热最新

Viola_z

1、设置透明度的样式语句： filter:alpha(opacity:30);//30是透明度的值。 2、因没有获取当前透明度的属性，则需要定义一个变量alpha，对变量和目标进行比较，实现效果。 3、IE和获取浏览器透明度的赋值方法： IE：object.style.filter='alpha(opacity:'+值+')'; 火狐：object.style.opacity=值/100;

查看全部

1 采集收起来源：JS透明度动画
2015-09-25
小光头

JS动画效果： 2-1：速度动画：为防止动画累加，在每次触发动画事件时，应该先清除前一个没有完成的动画，即清除之前开启的定时器，然后这次再开启新的定时器。命名的函数有多出相同时，使用封装函数的方法，尽可能的减少传入函数的参数 <style> *{margin:0;padding:0;} #div1{ width:200px; height:100px; background:#0F3; position:relative; left:-200px;} #div1 span{ display:block; height: 46px; position: absolute; right: -23px; width: 23px; text-align:center; background:#F00; } </style> <script> window.onload=function(){ var oid=document.getElementById('div1'); oid.onmouseover=function(){ startmove(0); } oid.onmouseout=function(){ startmove(-200); } } var timer=null; function startmove(offsetleft){ clearInterval(timer);//清除定时器 timer=setInterval(function(){ var speed=0; var oid=document.getElementById('div1'); // if(oid.offsetLeft==0){ if(oid.offsetLeft>offsetleft){ speed=-10;} else if(oid.offsetLeft<offsetleft){ speed=10; } else{ clearInterval(timer);} oid.style.left=oid.offsetLeft+speed+'px'; } ,30); } </script> </head> <body> <div id="div1"> <span>分享</span> </div>

查看全部

1 采集收起来源：JS速度动画
2018-03-22
weibo_怎能用真名_0

function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } function move(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.opacity = (icur+speed)/100; obj.style.filter = 'alpha(opacity='+(icur+speed)+')'; }else{ obj.style[attr] = icur+speed+"px"; } } if(flag) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }

查看全部

1 采集收起来源：完美运动框架
2018-03-22
hua落人断唱

多物体动画，基本上所有的属性都不能公用，尤其是定时器。

查看全部

1 采集收起来源：JS多物体动画
2015-08-05
勇敢的半导体 12:13

当运用dom0或者dom2级事件，想要传递参数的时候，应该使用匿名函数的方式，可以在匿名函数中调用已经定义好的函数。见代码的32和35行的区别。

查看全部

1 采集收起来源：JS速度动画
2015-07-27
三省吾身丶丶

JS动画效果： 2-1：速度动画：为防止动画累加，在每次触发动画事件时，应该先清除前一个没有完成的动画，即清除钱一池开启的定时器，然后这次再开启一个定时器。 offsetLeft值可以获取当前的left值，而offsetLeft属性不能被赋值，只能获取

查看全部

1 采集收起来源：JS速度动画
2015-07-13
timelikesong 13:12

多物体运动时候，运动参数不能公用

查看全部

1 采集收起来源：JS多物体动画
2014-12-28
Winni文静

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js动画制作</title> </head> <style> body,div,span{ margin:0; padding:0; } #div1{ height: 200px; width: 200px; background-color: #f00; position: relative; left: 0px; top: 0; opacity:0.3; filter:alpha(opacity：30） } </style> <script> window.onload = function(){ var oDiv =document.getElementById('div1'); 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.opacity = alpha/100 } },30) } </script> 所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

查看全部

1 采集收起来源：JS透明度动画
2018-03-22
荟芸

alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整 <script> 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 = (offleft - oDiv.offsetLeft)/10; speed = speed > 0 ?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft == offleft ){ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); } </script>

查看全部

1 采集收起来源：JS缓冲动画
2018-03-22
couragedn 07:06

filter:alpha(opacity:30); opacity:0.3

查看全部

1 采集收起来源：JS透明度动画
2015-06-29
couragedn 07:17

style.style.filter style.style.opacity

查看全部

1 采集收起来源：JS透明度动画
2015-06-07
小呵呵

function move(obj,json,fn){ var flag=true;//假设同时运动都完成了 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ if(attr=='opacity'){ var icur=Math.round(parseFloat(getStyle(obj,attr))*100);//四舍五入，否则会出现很长一串数字，0.07*100结果为7.0000000000001 }else{ var 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)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } if(flag){//所有的同时运动都完成了 clearInterval(obj.timer); if(fn){ fn(); } } } },30) } //getStyle获取的是单一样式，backgroundColor不能获取background复合样式 //获取的是自己设置过的样式 //要遵守上面两条，否则有兼容性问题 function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; }

查看全部

1 采集收起来源：完美运动框架
2018-03-22
Sharoncoco 04:51

6-2：完美运动框架 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式 var json={name:key}多对值可以用逗号隔开 var json={a:12,b:2} 遍历json,用 for-in循环 for(var i in json) {alert(i);//弹出对象 alert(json[i]);//弹出对象的值} 使用案例： window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,{width:400,height:101,opacity:100}) }} function startMove(obj,json,fn){ var flag=true;标志是否全部运动到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ 遍历JSON for( var attr in json){ var curr=0; if(attr=='opacity'){ //Math.round四舍五入 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){ fn();} } },30)}

查看全部

1 采集收起来源：完美运动框架
2018-03-22
Sharoncoco 08:18

3-1：缓冲动画 alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整 </style> <script type="text/javascript"> window.onload = function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-200); } }; var timer=null; // 从用两个函数实现，到用一个函数：两个有很多相同的部分，则相同部分可以共用，不同部分看有什么联系 // 从传入两个参数到一个参数：参数传递尽可能的少 function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetLeft)/20; speed=speed>0? Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } else {

查看全部

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

/*如果速度没有取整，往左移动卡在-196.4px就停止移动了，因为oDiv.style.left的值为-196.4px，offsetLeft得到的值是整数而且总是-196，而speed的值总是0.4，*/

查看全部

1 采集收起来源：JS缓冲动画
2014-09-23