javascript 循环移动div

元素在网页设计中扮演着重要的角色，常常用来包裹其他HTML元素并提供布局和样式。在Javascript中，可以很方便地控制

元素的位置和属性，其中包括循环移动。本文将介绍如何使用Javascript实现

元素的循环移动，以及如何将其与其他特效结合起来，使网页获得更加动态和交互性的效果。

循环移动

元素的最简单方法是改变其CSS样式中的位置属性，然后使用定时器，以一定的时间间隔重复执行移动操作。例如，我们可以在HTML文件中添加一个

元素，然后使用Javascript代码实现其向右移动的效果：

<div id="demo" style="position:absolute; left:0px; top:0px;">Hello World!</div>
<script>
function moveRight(){
var elem = document.getElementById("demo");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 300) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + "px";
}
}
}
</script>

在上面的代码中，我们使用了getElementById()方法来获取元素的引用，然后使用setInterval()方法来启动定时器，每10毫秒执行一次frame()函数。在frame()函数中，我们使用if语句判断是否达到了移动的目标位置（本例中是相对左端0处偏移300像素），如达到，则使用clearInterval()方法停止定时器，否则将元素的位置属性left加1，并使用style.left属性设置div元素的位置。这样，我们就可以实现

元素向右移动的效果。

除了向右移动，我们当然也可以实现向左、上、下等其它方向的移动。例如，我们可以实现一个让

元素从左下角移动到右上角的动画：

<div id="demo" style="position:absolute; left:0px; top:150px;">Hello World!</div>
<script>
function move() {
var elem = document.getElementById("demo");   
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 300) {
clearInterval(id);
} else {
pos++; 
elem.style.left = pos + "px"; 
elem.style.top = pos + "px"; 
}
}
}
</script>

在这个例子中，我们在HTML文件中使用了一个相对底部的位置来定位

元素，并在Javascript代码中将pos变量同时应用于left和top两个属性，从而实现向右上方斜向上移动的效果。

旋转是另一个可以结合循环移动的

元素特效。例如，我们可以实现一个旋转的

元素，并且在旋转过程中保持其位置不变：

<div id="demo" style="position:absolute; left:150px; top:100px;">Hello World!</div>
<script>
function rotate() {
var elem = document.getElementById("demo"); 
var angle = 0;
var id = setInterval(frame, 5);
function frame() {
if (angle == 360) {
angle = 0;
} else {
angle++; 
elem.style.transform = "rotate(" + angle + "deg)";
}
}
}
</script>

在这个例子中，我们使用element.style.transform属性来设置

元素的旋转角度，每5毫秒执行一次frame()函数，直到达到360度时angle归零，从而形成无限循环的旋转动画。

以上是关于循环移动

元素的一些示例。通过结合以上各种特效，可以创造出更加动态和生动的网页效果，提高用户的体验和互动性。