我知道可以用这个var obj=document.getElementById('mydiv');
function changeStyle(){
obj.style.left=parseInt(obj.style.left)+20+'px'
if(parseInt(obj.style.left)>=300)
clearInterval(timer);
向右运动，但是我另外写了一个obj.style.top向让它往下运动，但无法调用，不知道怎么解决。或者哪位有更好的方法让一个div绕一个矩形运动？谢谢
function changeStyle(){
obj.style.left=parseInt(obj.style.left)+20+'px'
if(parseInt(obj.style.left)>=300)
clearInterval(timer);
向右运动，但是我另外写了一个obj.style.top向让它往下运动，但无法调用，不知道怎么解决。或者哪位有更好的方法让一个div绕一个矩形运动？谢谢
<div id="pad" style="position:absolute;z-index:10;width:10px;height:10px;background:red"></div>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var line = 0;
onload=function(){
var p = {a:10,b:310,c:10,d:110};
$('#pad').css("left",p.a).css("top",p.c);
setInterval(function(){
var po = $('#pad').position();
var t;
switch(line){
case 0:
t = po.left;
t+=10;
$('#pad').css("left",Math.min(t,p.b));
if(t>p.b) line++;
break;
case 1:
t = po.top;
t+=10;
$('#pad').css("top",Math.min(t,p.d));
if(t>p.d) line++;
break;
case 2:
t = po.left;
t-=10;
$('#pad').css("left",Math.max(t,p.a));
if(t<p.a) line++;
break;
case 3:
t = po.top;
t-=10;
$('#pad').css("top",Math.max(t,p.c));
if(t<p.c) line++;
break;
}
line = line % 4;
},100)}
</script>
能否用DOM/JS实现？万分感谢！
<div id="pad" style="position:absolute;z-index:10;width:10px;height:10px;background:red"></div>
<script>
var line = 0;function $(s){
return document.getElementById(s);
}
onload=function(){
var p = {a:10,b:310,c:10,d:110};
$('pad').style.left = p.a;
$('pad').style.top = p.c;
setInterval(function(){
var po = {left:parseInt($('pad').style.left),top:parseInt($('pad').style.top)};
var t;
switch(line){
case 0:
t = po.left;
t+=10;
$('pad').style.left = Math.min(t,p.b);
if(t>p.b) line++;
break;
case 1:
t = po.top;
t+=10;
$('pad').style.top = Math.min(t,p.d);
if(t>p.d) line++;
break;
case 2:
t = po.left;
t-=10;
$('pad').style.left = Math.max(t,p.a);
if(t<p.a) line++;
break;
case 3:
t = po.top;
t-=10;
$('pad').style.top = Math.max(t,p.c);
if(t<p.c) line++;
break;
}
line = line % 4;
},100)}
</script>
Jquery也看不懂啊，真的是对不住啊……惭愧惭愧。能否麻烦用JS写下呢？
Yahoo Yui也可以实现。
最近我也在学习这类东西，代码就不贴了，LZ可以搜索一下相关的教程。
<head>
<script type="text/javascript">
function run() {
var div = document.getElementById("div");
var vertex = {ax: 20, ay: 20, bx: 300,by: 300};
var direction = 'right';
div.style.left = vertex.ax;
div.style.top = vertex.ay;
setInterval(function() {
switch(direction) {
case 'right':
div.style.left = parseInt(div.style.left) + 1;
if (parseInt(div.style.left) >= vertex.bx) {
direction = 'down';
}
break;
case 'down':
div.style.top = parseInt(div.style.top) + 1;
if (parseInt(div.style.top) >= vertex.by) {
direction = 'left';
}
break;
case 'left':
div.style.left = parseInt(div.style.left) - 1;
if (parseInt(div.style.left) <= vertex.ax) {
direction = 'up';
}
break;
case 'up':
div.style.top = parseInt(div.style.top) - 1;
if (parseInt(div.style.top) <= vertex.ay) {
direction = 'right';
}
break;
}
}, 1);
}
</script>
</head>
<body onload="run()">
<div id="div" style="position: absolute; z-index:1; width: 10px; height: 10px; background-color: red;"></div>
</body>
</html>
<div id="mydiv" style="width:50px; height:30px; background-color:red; position:absolute; left:0; top:0;"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var obj = document.getElementById('mydiv');
var timer = setInterval("changeStyle()",100);
var drct = 1; //方向 1:right; 2:down; 3:left; 4:up
var unit = 20; //单位时间移动的距离
function changeStyle(){
if (drct==1 || drct==3) obj.style.left = parseInt(obj.style.left)+ unit +'px'; //向左/右移动时改变left
if (drct==2 || drct==4) obj.style.top = parseInt(obj.style.top)+ unit +'px'; //向上/下移动时改变top
if (drct==1 && parseInt(obj.style.left)>=200) { drct = 2; } //向右移动到200px结束，改变方向
else if (drct==2 && parseInt(obj.style.top)>=200) { drct = 3; unit = -20;} //向下移动到200px结束，改变方向并置单位距离为负（准备向左运动）
else if (drct==3 && parseInt(obj.style.left)<=0) { drct = 4;} //向左移动到边缘结束，改变方向
else if (drct==4 && parseInt(obj.style.top)<=0) { clearInterval(timer);} //向上移动到边缘结束，并清掉定时器
}
//-->
</SCRIPT>
9楼的代码貌似只能运行一个循环吧~8楼的和我的思路一样，但是由于语法搭配不熟练所以我没写出来。突然我想到个新的问题
能不能产生两个div,运动方向相反，运动速度不一呢？
改为else if (drct==4 && parseInt(obj.style.top)<=0) { drct = 1; unit = 20;} 就可以无限循环了
改变x，y坐标，即left、top即可
<head>
<script type="text/javascript"> function run(div, type, speed) {
var vertex = {ax: 20, ay: 20, bx: 300,by: 300};
var direction;
if (type == 'clockwise') {
direction = 'right';
} else if (type == 'counterclockwise') {
direction = 'down';
}
div.style.left = vertex.ax;
div.style.top = vertex.ay;
setInterval(function() {
switch(direction) {
case 'right':
div.style.left = parseInt(div.style.left) + speed;
if (parseInt(div.style.left) >= vertex.bx) {
if (type == 'clockwise') {
direction = 'down';
} else if (type == 'counterclockwise') {
direction = 'up';
}
}
break;
case 'down':
div.style.top = parseInt(div.style.top) + speed;
if (parseInt(div.style.top) >= vertex.by) {
if (type == 'clockwise') {
direction = 'left';
} else if (type == 'counterclockwise') {
direction = 'right';
}
}
break;
case 'left':
div.style.left = parseInt(div.style.left) - speed;
if (parseInt(div.style.left) <= vertex.ax) {
if (type == 'clockwise') {
direction = 'up';
} else if (type == 'counterclockwise') {
direction = 'down';
}
}
break;
case 'up':
div.style.top = parseInt(div.style.top) - speed;
if (parseInt(div.style.top) <= vertex.ay) {
if (type == 'clockwise') {
direction = 'right';
} else if (type == 'counterclockwise') {
direction = 'left';
}
}
break;
}
}, 1);
}
function load() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
run(div1, 'clockwise', 1);
run(div2, 'counterclockwise', 2);
}
</script>
</head>
<body onload="load()">
<div id="div1" style="position: absolute; z-index:1; width: 10px; height: 10px; background-color: red;"></div>
<div id="div2" style="position: absolute; z-index:1; width: 10px; height: 10px; background-color: blue;"></div>
</body>
</html>