JS动画
动画的原理
盒子自身的 offsetLeft + 步长；
封装动画
封装匀速动画：
Math.abs（）绝对值
通过JS获取CSS
1. 通过点语法
box.style.width box.style.background
这个方法用的很多，但是，有缺陷
缺陷：点后面的width和background是没法改变，第二没法儿传递参数
Var w=width
Box .style.w
2. 利用 [ ] 获取
Box.style[‘widht’];
这个的优点，可以传递参数
通过封装，随时传递参数来获取，方便快捷
function attr(obj,attr){
console.log(obj.style[attr]);
}
attr(red,’left’)
得到我们的CSS样式
比如我们前面获取CSS样式，是用box.style.left
但是，他们只能获取 行内样式
但是我们工作。更多用的是内嵌式或者外链式
那么，怎么才能得到内嵌式或者外链式
语法：
window.getComputedStyle(“元素”，“伪类”) [属性] ； w3c标准写法
这里面两个参数都是必须的啊，如果没有伪类，就用null代替
obj.currentStyle;
那么，有兼容性问题，就肯定有兼容性写法
我们元素里面有很多属性，例如left、width
那么，我们想要某个属性，就传入，并且返回某个属性
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
for in 循环遍历
for（变量 in 对象）{执行语句；}
我们可以用in来判断JSON有没有属性，
For….in…..每循环一次，就会对数组元素或者对象进行一次操作，也称为枚举法
记住：
for(var k in json){
}
For in循环遍历json后，k就是他的每一个属性
那么，想要拿到值，是json[k]
也就是说，k并不是json的属性值，只是属性
<style>
.red{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 0;
}
.pink{
width: 300px;
height: 300px;
background: pink;
position: relative;
left: 0;
}
</style>
<div class="red" id="red"></div>
<div class="pink" id="pink"></div>
<button id="btn1">red动起来</button>
<button id="btn2">pink动起来</button>
speed：步长
target：目标
最简单的匀速动画函数（只往右）
function animate(obj,speed,target){
obj.timer = setInterval(function(){
if(obj.offsetLeft>target){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},50)
}
最简单的匀速动画函数（可左可右）
function animate(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft - target < 0 ? 10 : -10;
obj.timer = setInterval(function(){
var run = target - obj.offsetLeft;
if(Math.abs(run)<=10){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed +"px";
}
},30)
}
最简单的缓动动画函数（可左可右）
function animate(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetLeft)/10;
console.log(speed);
speed = speed>0?Math.ceil(speed) :Math.floor(speed);
obj.style.left = obj.offsetLeft + speed +"px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},50)
}
最简单的缓动动画函数（传多个属性 json）
function animate(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var cus = parseInt(getStyle(obj,attr));
var speed = (json[attr] - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == json[attr]){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
}
},30)
}
最简单的缓动动画函数（传多个属性 json + 回调函数）
function animate(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = parseInt(getStyle(obj,attr));
var speed = (json[attr] - leader)/10;
speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
obj.style[attr] = leader + speed + "px";
if(leader!=json[attr]){ // 只能比较数值，如果是字符串就跳过
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},30)
}
如何调用：
btn1.onclick = function(){
animate(pink,{left:400,top:400,width:300,height:300,borderRadius:1000},
function(){
animate(pink,{left:0,top:0,width:200,height:200,borderRadius:0})
}
);
};
最简单的缓动动画函数（传多个属性 json + 回调函数 + 透明度 +z-index）
function animate(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = 0;
if(attr == "opacity"){
leader = parseInt(getStyle(obj,attr)*100);
}else{
leader = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - leader)/10;
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if(attr == "opacity"){
obj.style.opacity = (leader + speed)/100;
}else if(attr == "zIndex"){
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = leader + speed + "px";
}
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},30)
}
如何调用：
btn1.onclick = function(){
animate(pink,{left:500,top:400,width:300,height:300,borderRadius:0,opacity:10,zIndex:10},
function(){
animate(pink,{left:1200,top:0,width:200,height:200,borderRadius:1000,opacity:100,zIndex:5})
}
);
};
demo 导航缓动图片
<div class="box">
<div class="nav">
<span id="bg" class="bg"></span>
<ul id="ul">
<li><a href="javascript:">首页新闻</a></li>
<li><a href="javascript:">活动规则</a></li>
<li><a href="javascript:">阿里巴巴</a></li>
<li><a href="javascript:">腾讯新闻</a></li>
<li><a href="javascript:">网站策划</a></li>
<li><a href="javascript:">公司简介</a></li>
<li><a href="javascript:">好好学习</a></li>
<li><a href="javascript:">天天向上</a></li>
</ul>
<span id="span"></span>
</div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{ color:#333;font-family:Helvetica,Microsoft YaHei;}
.box{
width: 100%;
height: 100%;
background:black;
}
.nav{
width: 800px;
margin: 0 auto;
line-height: 42px;
height: 42px;
background: white;
border-radius: 5px;
position: relative;
top: 100px;
text-align: center;
}
.nav ul{
list-style: none;
height: 42px;
float: left;
position: absolute;
}
.nav:after{
content: "";
display: table;
clear: both;
}
.nav ul li{
float: left;
width: 83px;
}
.nav ul li a{
color: #333;
font-size: 14px;
text-decoration: none;
}
#span{
background: url("images/rss.png");
width: 32px;
height: 32px;
display: inline-block;
float: right;
margin: 5px;
}
.nav .bg{
background: url("images/cloud.gif");
position: absolute;
left: 0;
width: 83px;
height: 42px;
}
</style>
<script>
var ul = document.getElementById("ul");
var bg = document.getElementById("bg");
var ulis = ul.children;
var timer = null;
var leader = 0,target = 0,current = 0;
for(var i=0;i<ulis.length;i++){
ulis[i].onmouseover = function(){
clearInterval(timer);
target = this.offsetLeft;
timer = setInterval(animate,20);
};
ulis[i].onclick = function(){
current = this.offsetLeft;
};
}
ul.onmouseout = function(){
clearInterval(timer);
target = current;
timer = setInterval(animate,20);
};
function animate(){
leader =leader + (target -leader)/10;
bg.style.left = leader +"px";
}
</script>
网友评论