在jQuery中实现碰到边缘反弹的动画效果该如何做？

先上效果图：

录出来有点卡顿的赶脚，实际上还是挺顺畅的。

1.HTML:

<p class="box"></p>

2.CSS:

body{
   background:skyblue  
}
.box{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background: white;
}

3.JS:

这里只是简单的效果，由此可引发多个问题：

1）如果多个方块出现，页面会不会卡顿呢？

2）如果要实现多个方块碰撞之后改变运动的位置，这个怎么做呢？

3）方块的初始位置能不能随机呢？

4）多个方块的速度怎样设置不一样呢

5）能不能做一个弹方块的小游戏？

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Es6中有关Generator函数详细解析

在ajax请求不同页面的微信JSSDK出现的一些问题？

详细解读Node 定时器知识

以上就是在jQuery中实现碰到边缘反弹的动画效果该如何做？的详细内容，更多请关注Gxl网其它相关文章！