js实现左右来回运动效果实例

实现js基础运动那么一定要了解css的定位方式position分为固定定位fixedrelativeabsolute

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:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红豌豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值