关闭

碰撞运动 crash.html

41人阅读 评论(0) 收藏 举报
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width:100px;height:100px;background: red;position:absolute;}
    </style>
    <script>
        function startMove(){
            var oDiv=document.getElementById('div1');
            var iSpeedX=30;
            var iSpeedY=8;
            setInterval(function(){
                iSpeedY+=3;
                var l=oDiv.offsetLeft+iSpeedX;
                var t=oDiv.offsetTop+iSpeedY;
                if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
                    iSpeedY*=-0.8;
                    iSpeedX*=0.8;
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }else if(t<=0){
                    iSpeedY*=-1;
                    iSpeedX*=0.8;
                    t=0;
                }
                if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
                    iSpeedX*=-0.8;
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }else if(l<=0){
                    iSpeedX*=-0.8;
                    l=0;
                }
                if(Math.abs(iSpeedX)<1){
                    iSpeedX=0;
                }
                if(Math.abs(iSpeedY)<1){
                    iSpeedY=0;
                }
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';
            },30);
        }
    </script>
</head>
<body>
<input id="ipt1" type="button" value="开始运动" onclick="startMove()">
<div id="div1"></div>
</body>
</html>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3020次
    • 积分:321
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类