基本动画函数

最新推荐文章于 2024-09-05 11:49:00 发布

a63438840

最新推荐文章于 2024-09-05 11:49:00 发布

阅读量127

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/shanlu0000/p/11256649.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #demo{
            width:100px;
            height:100px;
            background-color: pink;
            position:absolute;
            top:40px;
            left:0;
        }
    </style>
</head>
<body>
    <button id="button300">300</button>
    <button id="button600">600</button>
    <div id="demo"></div>
</body>
</html>
<script>
    function $id(id){return document.getElementById(id);}
    var timer=null;
    $id("button300").οnclick=function(){
        run($id("demo"),300);
    }
    $id("button600").οnclick=function(){
        run($id("demo"),600);
    }

    function run(obj,target){  //obj是做动画的对象，（这里是demo),target是走的距离
            obj.timer=setInterval(function(){
                obj.style.left=obj.offsetLeft+10+"px";
                if(obj.offsetLeft>target)
                {
                    clearInterval(obj.timer);
                }
            },10)
    }
</script>

转载于:https://www.cnblogs.com/shanlu0000/p/11256649.html

a63438840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基本动画函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang=...
复制链接

扫一扫