实现js基础运动那么一定要了解css的定位方式position分为固定定位fixed 、relative 、absolute
fixed 固定元素在页面上
relative 绝对定位 不会脱标
absolute 会脱标,不占位置
实现div元素从左边走到右边,就是根据目标值与实际div的左边距进行逻辑运算,这里就会分为两种情况,
一种情况就是目标值比div左边距大,另一种就是目标值比div左边距小。
当目标值比div元素的左边距大,这说明div是从左边向右边运动,将div看作一个物体,通过不断的增大left的距离,实现向右偏移,如果标记这个标量,那么一定是正数
当目标值比div元素的左边距小,说明Div运行的方向是向左边,通过不断的减少div左边的左边距实现div向左移动,在使用定时器,通过不间断的刷新就能得到所谓的左移或者右移的动画效果。
问题
**div出现不停左右闪动
这是因为在进行不间断的修改左边距的值时,还没有结束从而触发新的定时器的叠加,导致值过大,出现计算左边距值不间断修改导致div的left值左右跳动,解决方法就是使用变量接收这个定时器的对象,在下一次的点击进入销毁以前的定时器,然后在开启新的定时器。即可解决。
left值不正确,达不到设定的目标值
使用通配符 *
*{
margin:0;
padding:0;
}
将外边距,边界值设置为0
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: