这篇博客介绍了使用js实现重力场模拟、元素拖拽以及轮播图的详细步骤。在重力场模拟中，涉及了多方向运动、碰撞检测、重力加速度和能量损失的实现。拖拽功能的实现需要实时改变元素的位置。轮播图的实现则包括无缝衔接、左右按钮控制和索引指示器，强调了定位、层级提升和锁机制的重要性。
js运动
一、模拟重力场的js实现
思路分析：1.模拟重力场的实现，要完成的四个方向是多方向运动+碰撞检测+重力加速度+能量的损失。
2.首先要声明一个元素来控制他的运动，并设置定位为绝对定位（相对于页面文档），方便操作他的运动。
3.实现多方向的运动就是既要改变这个dom的left，又要改变他的top，从而形成一个合力来改变。
4.实现碰撞的检测：就是比如说当碰撞到底部的时候，速度反向，同时设置相对应的实时left或者是top与之相对应（避免出现滚动条）。
5.重力加速度的实现：只要在每次定时器进行运行的时候都进行y方向的重力加速度的变化就可以。
6.能量的损失：在实际情况中，不可能会一直运动下去，所以说我们在模拟的时候，忽略在运动过程中损失**，在每次碰撞过程之后将ispeedx以及ispeedy都将其减小**。
代码实现bug：1.应该在最后在碰撞损失之后再进行速度的设定，不应该在一开始就已经设置dom.style.left以及top。
2.记住在一开始要清空定时器，避免多次点击导致定时器的累加。
3.定时器在设定之后一定要设置清空的条件判断，否则定时器将会一直存在。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重力场模拟</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 0;
left: 0;
}
最低0.47元/天 解锁文章
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
