关于层在窗体中的移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<script language= "javascript ">
function move(){
var now_left = document.getElementById( "movelayer ").style.left;
var window_width = document.body.offsetWidth;
var now_top = document.getElementById( "movelayer ").style.top;
var window_height = window.screen.height;
if ((parseInt(now_left) + 80) < window_width){
top_left_move();
setTimeout ( "move() " ,1);
}
else if ((parseInt(now_top) + 80) < window_height){
right_down_move();
setTimeout ( "move() " ,1);
}
else {
var stop = setTimeout ( "move() " ,1);
clearTimeout (stop);
move_down_up();
}
}
function top_left_move(){
var now_left = document.getElementById( "movelayer ").style.left;
var window_width = document.body.offsetWidth;
if ((parseInt(now_left) + 80) < window_width){
document.getElementById( "movelayer ").style.left = parseInt(now_left) + 1;
var stop = setTimeout( "top_left_move() ", 100);
}
else {
clearTimeout (stop);
return ;
}
}
function right_down_move(){
var now_top = document.getElementById( "movelayer ").style.top;
var window_height = window.screen.height;
if ((parseInt(now_top) + 80) < window_height){
document.getElementById( "movelayer ").style.top = parseInt(now_top) + 1 ;
var stop = setTimeout( "right_down_move() ", 100);
}
else {
clearTimeout (stop);
return ;
}
}
function move_down_up(){
var now_left = document.getElementById( "movelayer ").style.left;
var now_top = document.getElementById( "movelayer ").style.top;
if (parseInt(now_left) > 0 ){
down_left_move();
setTimeout ( "move_down_up() " ,1);
}
else if (parseInt(now_top) > 0 ){
left_up_move();
setTimeout ( "move_down_up() " ,1);
}
else {
var stop = setTimeout ( "move_down_up() " ,1);
clearTimeout (stop);
move();
}
}
function down_left_move(){
var now_left = document.getElementById( "movelayer ").style.left;
if (parseInt(now_left) > 0 ){
document.getElementById( "movelayer ").style.left = parseInt(now_left) - 1;
var stop = setTimeout( "down_left_move() ", 100);
}
else {
clearTimeout (stop);
return ;
}
}
function left_up_move(){
var now_top = document.getElementById( "movelayer ").style.top;
if (parseInt(now_top) > 0 ){
document.getElementById( "movelayer ").style.top = parseInt(now_top) - 1 ;
var stop = setTimeout( "left_up_move() ", 100);
}
else {
clearTimeout (stop);
return ;
}
}
</script>
</head>
<body onload = "move_down_up() ">
<div id = "movelayer " style= "background-color:#0000FF; position:absolute; left:0px; top:0px; z-index:1; width:100px; height:100px; "> </div>
</body>
</html>
就是这样的效果
但是觉得代码好长哦.................
为什么这样
<head>
<script language= "javascript ">
<!--
function move(){
var now_left = document.getElementById( "movelayer ").style.left;
var window_width = document.body.offsetWidth;
var now_top = document.getElementById( "movelayer ").style.top;
var window_height = document.body.offsetHeight;//为什么上面不能用这个属性得到值呢？上面用这个属性得到的是0px
while (parseInt(now_left) < window_width - 80){//这里一用while就死掉？
document.getElementById( "movelayer ").style.left = parseInt(now_left) - 1;
}
}
-->
</script>
</head>
<body onload = "move() ">
<div id = "movelayer " style= "background-color:#0000FF; position:absolute; left:0px; top:0px; z-index:1; width:100px; height:100px; "> </div>
</body>
</html>
[解决办法]
while 循环里now_left和window_width的值都没有变化，也就是说循环条件一直成立，所以就死循环了。