html代码 简单地设置一个宽100px，高100px，背景色为红色的div盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id='box1'></div> </body> </html>css代码
div{ width: 200px; height: 200px; background-color: red; position: absolute; left: 0; }js代码
window.onload = function(){ // 获取盒子标签 var box1 = document.getElementById('box1') // div盒子的横坐标 var leftnum = 0; // 标志盒子的移动方向：0向右移，1向左移 var flag = 0; function myfunc2() { // 当div盒子移到屏幕最右边时，设置flag为1使盒子向左移 if (leftnum>1150) { flag = 1; } // 当div盒子移到屏幕最左边时，设置flag为0使盒子向右移 if (leftnum<5) { flag = 0; } // 右移时横坐标加一 if (flag==0) { leftnum += 1; } // 左移时横坐标减一 if (flag==1) { leftnum -= 1; } // js设置div坐标 box1.style.left = leftnum + 'px'; } // 定时器设置每2毫秒移动一次 setInterval(myfunc2,2) }效果展示
