js缓动动画函数封装

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #dv{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-top: 50px;
            position:absolute;
        }
    style>
head>
<body>
<input type="button" value="点到400px" id="btn1"/>
<input type="button" value="点到800px" id="btn2"/>
<div id="dv">div>
 <script>
     function my$(id){
         return document.getElementById(id);
     }
     var btn1=my$("btn1");
     var btn2=my$("btn2");
     var dv=my$("dv");
    //点btn1开始移
btn1 . onclick = function (){ animate ( dv , 400 ); };
 //点btn2开始移
btn2 . onclick = function (){ animate ( dv , 800 ); }; function animate ( element , target ){ //首先清除 史定 器,一个盒子只能有一个定 器,在使用定 器之前要清除 史定 器,防止 生冲突 //定 器本身将成 为该层 的一个属性 clearInterval ( element . timeId ); element . timeId = setInterval ( function (){ var current = element . offsetLeft ; var step = ( target - current ) / 10 ; // 缓动动 画:每次移 的步数在减少(类似于生活中的电梯停止,汽车刹车) step = step > 0 ? Math . ceil ( step ) : Math . floor ( step ); current = current + step ; if ( Math . abs ( step ) > Math . abs ( target - current )){ clearInterval ( element . timeId ); element . style . left = target + "px" ; } else { element . style . left = current + "px" ; } }, 20 ); } script > body > html >

你可能感兴趣的:(js特效)