JS动力回弹效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45566163/article/details/102588907

js原生代码实现动力回弹，比较简单，话不多说，代码奉上
// A code block

	<style type="text/css">
		.cont{
			width: 1000px;
			height: 600px;
			background: #eee;
			margin: 20px auto;
			position: relative;
		}
		.box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;}
	</style>
</head>
<body>
	<div class="cont">
		<div class="box"></div>
	</div>
</body>
<script type="text/javascript">
  // 目标1: 让小球从上面落下来
  // 准备:获取节点,绑定事件
  var contObj = document.querySelector('.cont');
  var boxObj = document.querySelector('.box');
  document.onclick =()=>{
     // 1 设置每次增加值的步长
     var speed = 10;
      // 2 重力加速的值
     var g=2;
       // 3 获取最大的top值,(下落最大高度)
       // 用cont的高度减去box的高度
     var target = contObj.offsetHeight - boxObj.offsetHeight;
       // 4 设置定时器,让小球的top值,累加speed
    var times = setInterval(()=>{
            speed+=g;
         // 5 判断小球是否下落到最大高度,是则停止下落
           // 
           if((boxObj.offsetTop+speed)>target){
              // console.log(target)
              // console.log(boxObj.offsetTop);
              // console.log(speed)
                //目标:实现回弹,top值减小
                //6 将speed的值,设置为负的
                // 每次回弹让speed的值,进行损耗
                  speed = -parseInt(speed*0.8);
                  console.log(speed+'a')
                // 当speed的值,等于0时或者小于1时,就停止
                if(Math.abs(speed)<1){
                   clearInterval(times);
                }
              
    
                // 给top直接设立终点值
              boxObj.style.top  = target+'px';  
           }else{
            console.log(speed+'b')
                // 设置小球的top值
             boxObj.style.top = boxObj.offsetTop+speed+'px';
           }
         
         
    
    },30);
  }