js反弹运动

js反弹运动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <style>
        .ball {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 200px;
            left: 0;
            background: skyblue;
        }
    </style>
    </head>
    <body>
        <button>飞起来</button>
        <div class="ball"></div>
        <!-- <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> -->
        <script type="text/javascript">
            var speedX=6;
            var speedY=-10;
            var timer=null;
            var btn = document.querySelector("button");
            var ball = document.querySelector(".ball");
            btn.onclick=function(){
                clearInterval(timer);
                timer=setInterval(function(){
                     ball.style.left=ball.offsetLeft+speedX+"px";
                     ball.style.top=ball.offsetTop+speedY+"px";
                     var maxT=window.innerHeight-ball.offsetHeight;
                     var maxL=window.innerWidth-ball.offsetWidth;
                     if(ball.offsetTop<0){
                        speedY*=-1;
                        ball.style.top=0;
                     }else if(ball.offsetTop>maxT){
                        speedY*=-1;
                        ball.style.top=maxT+"px";
                     }
                     if(ball.offsetLeft<0){
                         ball.style.left=0;
                          speedX*=-1;
                     }else if(ball.offsetLeft>maxL){
                         ball.style.left=maxL+"px";
                         speedX*=-1;
                     }

                 }
                ,30)
            }
        </script>
    </body>
</html>

原文地址:https://www.cnblogs.com/lxystar/p/10471640.html

时间: 2024-11-04 19:49:46

js反弹运动的相关文章

原生js实现一个DIV的碰撞反弹运动

 原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back

js缓冲运动代码实例

js缓冲运动代码实例:元素的缓冲运动效果要比匀速运动更为美观一些,因为显得更为有张力和弹性,当然对于浏览者来说可能会有更好的效果,那么留住用户的可能性也就更大,下面就通过代码实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

js制造运动的假象-------Day63

这里用的这个名称可能不合适,不过暂时我也没有想起比较对应的名字来,那就这样先写吧. 首先,我先表达下我想实现的是什么效果: 想必大家都玩过,至少见过很多小游戏,比方说超级玛丽,比方说flappy bird,在里面总看到马里奥或者小鸟就一直向前走啊向前飞啊,然后飞过了大河,跳过了深坑,最终到达终点,而在这个记录中我所关注的只是背景的变化,就像下面的图示: 最终它到了城堡中,而我们的屏幕中又不会显示滚动条,它是如何运动的呢? 其实,这个功能应该是个比较基础的功能了,只是之前不够敏感,今天从公交车上看

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

js之运动框架缓冲运动

由于JS里对于数值小数点会自动去除,所以对于运动位置,需要使用Math.ceil()向上取整或者 Math.floor()向下取整进行解决 以下是我的缓冲运动练习简单代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

原生JS 封装运动函数

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌顶. /* - obj 指的是DOM对象 - json 指的是 CSS样式 - 例 startMove(oDiv,{width:100,height:100},function(){}) */ function startMove(obj,json,fnEnd){ clearInterval(obj

JS完美运动框架

/*---------------------------------------------------------------------------- 功能: 获取某个节点下的所有ClassName为'sClass'的元素输入: oParent:要获取的class元素的父级节点 sClass:要获取的元素的class名称输出: 获取到的节点数组 --------------------------------------------------------*/ function getEl

js弹性运动滑动的菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性运动效果下滑的菜单</title> <script>  window.onload = function(){   var oUl = document.getElementById('oul');   var oLi = oul.getElem

js实现运动的框架实例

html代码:鼠标移入时多物体实现高宽同时变化接着改变透明度 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="t.css"