webapi 动画函数的封装

最新推荐文章于 2021-07-28 17:26:08 发布

天马行空zqzq

最新推荐文章于 2021-07-28 17:26:08 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/104731901

版权

动画函数的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv {
            height: 200px;
            width: 200px;
            background-color:pink;
            position: relative;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1">
<input type="button" value="移动到800px" id="btn2">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    //设置任意一个元素移动到任意位置
    function animate(element,target){
        clearInterval(element.timer);
         element.timer=setInterval(function(){
             var current=element.offsetLeft;
             var step=10;
             step=current<target?step:-step;
             current+=step;
             if(Math.abs(current-target)>Math.abs(step)){
                 element.style.left=current+"px";
             }else{
                 clearInterval(element.timer);
                 element.style.left=target+"px";
             }
        },100);
    }
    my$("btn1").οnclick=function () {
      animate(my$("dv"),400);
    };
    my$("btn2").οnclick=function () {
        animate(my$("dv"),800);
    };
</script>
</body>
</html>

天马行空zqzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webapi 动画函数的封装

动画函数的封装<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #dv { height: 200px; ...
复制链接

扫一扫