js off 缓动动画
动画也有很多种，一起来学习，缓动动画吧
缓动动画
1、缓动动画原理=盒子位置+（目标盒子位置-现在盒子位置）/10
2、步长越来越小
3、让步长越来越小的公式
步长=（目标位置-本身位置）/10
var but=document.getElementsByTagName("button")[0]; var box=document.getElementsByTagName("div")[0]; but.onclick=function(){ setInterval(function(){ //缓动效果，如果缓动，步子越来越小 // 步长的公式=盒子现在的位置+（盒子目标位置-现在的位置）/10; var target=400; var step=(target-box.offsetLeft)/10; //动画原理：盒子未来的位置 = 盒子当前的位置+步长 box.style.left=box.offsetLeft+step+"px" //清除定时器，当目标值减去盒子的位置 小于步子 清除 if(box.offsetLeft-400<(400-box.offsetLeft)/10){ clearInterval(strme) } },1000) }
缓动简单分装版
<script>
var but=document.getElementsByTagName("button")[0];
var div=document.getElementsByTagName("div")[0];
var timer=null;
but.onclick=function(){
//要用定时器先请定时器
clearInterval(timer);
timer=setInterval(function() {
//缓动效果，如果缓动，步子越来越小
// 步长的公式=盒子现在的位置+（盒子目标位置-现在的位置）/10;
var step=(0-div.offsetLeft)/10;
//最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置
//拓展，目标值 - 现在值 差值大于0时向上曲整，小于0的时候，向小取整
// step=(0-div.offsetLeft)<0 ? Math.floor(step) : Math.ceil(step); //对的结果在前面
//step=0<div.offsetLeft ? Math.floor(step) : Math.ceil(step);
step= step>0 ? Math.ceil(step) : Math.floor(step);
div.style.left=div.offsetLeft+ step + "px";
console.log(1);
//跳出条件 目标值-当前位置绝对值<步长绝对值，因为与可能是
if( Math.abs(0-div.offsetLeft)< Math.abs(step)){
div.style.left =0+"px";
clearInterval(timer)
}
},100)
}
缓动分装最总版
<script>
var but=document.getElementsByTagName("button");
var box=document.getElementsByTagName("div");
var timer=null;
//调用函数
but[0].onclick=function () {
animate(box[0],200)
};
but[1].onclick=function () {
animate(box[0],400)
};
//分装代码
function animate(ele,target){
//用定时器先清除定时器
clearInterval(ele.timer);
//定义定时器
ele.timer=setInterval(function(){
//定义缓动 动画步长 越来越慢
// 步长=（目标值-现在值）/10
var step=(target-ele.offsetLeft )/10;
//对步长二次加工（小于步长相下去值 大于）
step=step>0 ? Math.ceil(step):Math.floor(step);
//赋值给left
console.log(1);
ele.style.left=ele.offsetLeft+step+"px";
//清除定时器
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
//处理小数赋值
ele.style.left=target+"px";
clearInterval(ele.timer)
}
},30)
}
</script>
筋斗云案例
<style>
*{margin:0; padding:0; }
body{background:rgba(0,0,0,0.8)}
.box{width:800px; height:42px; border-radius: 8px; background: #fff url("../image/wifi.png") no-repeat right center ; margin:200px auto; position: relative;}
.box ul{position: relative;}
.box li{float:left; list-style: none; width:83px; height:42px; text-align: center; font:500 16px/42px "simsun"; cursor: pointer;}
.box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:0; }
</style>
<script>
//需求1：属于移到哪个li上，span就停在那个li上，离开后，span会到原点
//需求2；鼠标点击哪个li就记录li标签，移开的时候，span就会到记录的li上
window.onload=function () {
//获取元素
var liArr=document.getElementsByTagName("li");
var span=document.getElementsByTagName("span")[0];
var liWidth=liArr[0].offsetWidth;
var coun=0;
//绑定事件
for(var i=0; i<liArr.length; i++){
//绑定属性index
liArr[i].index=i;
liArr[i].onmouseover=function () {
animate(span,this.index*liWidth)
}
liArr[i].onmouseout=function () {
animate(span,coun*liWidth)
}
liArr[i].onclick=function () {
coun=this.index;
animate(span,coun*liWidth)
}
}
}
//分装代码
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-ele.offsetLeft )/10;
step=step>0 ? Math.ceil(step):Math.floor(step);
console.log(1);
ele.style.left=ele.offsetLeft+step+"px";
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer)
}
},30)
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>搜狐新闻</li>
<li>腾讯新闻</li>
<li>河北新闻</li>
<li>北京新闻</li>
<li>湖南新闻</li>
<li>山东新闻</li>
<li>湖北新闻</li>
</ul>
</div>
<style>
*{margin:0; padding:0; }
body{background:rgba(0,0,0,0.8)}
.box{width:800px; height:42px; border-radius: 8px; background: #fff url("../image/wifi.png") no-repeat right center ; margin:200px auto; position: relative;}
.box ul{position: relative;}
.box li{float:left; list-style: none; width:83px; height:42px; text-align: center; font:500 16px/42px "simsun"; cursor: pointer;}
.box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:0; }
</style>
<script>
//需求1：属于移到哪个li上，span就停在那个li上，离开后，span会到原点
//需求2；鼠标点击哪个li就记录li标签，移开的时候，span就会到记录的li上
window.onload=function () {
//获取元素
var liArr=document.getElementsByTagName("li");
var span=document.getElementsByTagName("span")[0];
var liWidth=liArr[0].offsetWidth;
var coun=0;
//绑定事件
for(var i=0; i<liArr.length; i++){
//绑定属性index
liArr[i].index=i;
liArr[i].onmouseover=function () {
animate(span,this.index*liWidth)
}
liArr[i].onmouseout=function () {
animate(span,coun*liWidth)
}
liArr[i].onclick=function () {
coun=this.index;
animate(span,coun*liWidth)
}
}
}
//分装代码
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-ele.offsetLeft )/10;
step=step>0 ? Math.ceil(step):Math.floor(step);
console.log(1);
ele.style.left=ele.offsetLeft+step+"px";
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer)
}
},30)
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>搜狐新闻</li>
<li>腾讯新闻</li>
<li>河北新闻</li>
<li>北京新闻</li>
<li>湖南新闻</li>
<li>山东新闻</li>
<li>湖北新闻</li>
</ul>
</div>
