html盒子移动动画代码,js实现盒子滚动动画效果

Document

*{

margin: 0;

padding: 0;

}

.box1{

/* 必须加定位才可以动 */

position: absolute;

left: 0;

width: 50px;

height: 50px;

background-color: blueviolet;

}

// 动画原理：

// 1.获得盒子当前位置

// 2.让盒子在当前位置加上2px 的移动距离

// 3.利用定时器不断重复中国操作

// 4.接触定时器

// 5.注意添加定位，才可以使用element.style.left

var box1 =document.querySelector('.box1') // 获取事件源

var timer = setInterval(function(){

if( box1.offsetLeft >= 500){

clearInterval(timer); // 清除定时器

}else{

// 每50毫秒就将新的值给box1.left

box1.style.left = box1.offsetLeft +2 +'px';

}

},50)