动画也有很多种,一起来学习,缓动动画吧
缓动动画
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].οnclick=function () { animate(box[0],200) }; but[1].οnclick=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.οnlοad=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.οnlοad=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>