关于div缓慢移动

点击button调用onclick函数
interval = setInterval('rightMove()',10);function rightMove(){
if(focus_left<336){
//right_ing = 1;
document.getElementById('focus').style.left = ++focus_left + "px";
right_count++;
//right_ing = 0;
if(right_count==110){
clearInterval(interval);
right_count = 0;
//right_ing = 0;
}
}
else{
document.getElementById('focus').style.left = "6px";
focus_left = document.getElementById('focus').offsetLeft;
clearInterval(interval);
right_count = 0;
right_ing = 0;
}
}
一个简单的点击buttton后div移动的效果~可是如果在一次移动没有完成的时候在点击一次button~就会再次调用move函数~导致div不断移动不停止~而且速度加快~请问各位大侠怎么处理啊~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

给你个思路，你拓展下就行了！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #winpop
        {
            width:200px; height:0px; position:absolute;
            right:0; bottom:0px; border:1px solid #99999;
            margin:0px; padding:1px; overflow:hidden; background:#fff; display:none;
         }
         div.title
         {
             width:100%; height:20px; line-height:20px; background:#290052;
             font-weight:bold; text-align:center; font-size:12px; color:#fff;
         }
         div.content
         {
             width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#ff0000;
             text-decoration:underline; text-align:center; border:1px solid #290052;
         }
         .close
         {
             position:absolute; right:4px; top:-1px; color:#fff; cursor:pointer;
         }
         #glide{background:yellow; border:1px solid blue; display:none;}
    </style>
    <script language="javascript" type="text/javascript">
        var MsgPop;
        var popH;
        var oDiv;
        var oDivW;
        var oDivH;
        window.onload = function () {
            MsgPop = document.getElementById("winpop");
            MsgPop.style.height = "0px";            tips_pop();
            setTimeout("tips_pop()", 5000);
        }
        function tips_pop() {
            popH = parseInt(MsgPop.style.height);
            if (popH == 0) {
                MsgPop.style.display = "block";
                show =setInterval("changeH('up')", 2);
            }
            else {
                hide = setInterval("changeH('down')", 2);
            }
        }
        function changeH(str) {
            popH = parseInt(MsgPop.style.height);
            if (str=="up") {
                if (popH <= 100) {
                    MsgPop.style.height = (popH + 4).toString() + "px";
                }
                else {
                    clearInterval(show);
                }
            }
            if (str == "down") {
                if (popH >= 4) {
                    MsgPop.style.height = (popH -4).toString() + "px";
                }
                else {
                    clearInterval(hide);
                    MsgPop.style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <div id="winpop">
        <div class="title">
            短消息<span class="close" onclick="tips_pop()">X</span>
        </div>
        <div class="content">未读消息(3)</div>
    </div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
body{
margin:0px;
}
#focus{
background:url(imgs/jh.png) left top no-repeat;position:absolute;left:6px;top:66px;width:96px;height:100px;
} .big_box{
background:url(imgs/index.jpg) left top no-repeat;width:720px;height:576px;
}
.boxs{
background:url(imgs/index.png) left top no-repeat;width:500px;height:350px;
} .box0{
background:url(imgs/iphone-1.png) left top no-repeat;position:absolute;left:20px;top:76px;width:68px;height:83px;
}
.box1{
background:url(imgs/iphone-2.png) left top no-repeat;position:absolute;left:130px;top:76px;width:68px;height:83px;
}
.box2{
background:url(imgs/iphone-3.png) left top no-repeat;position:absolute;left:240px;top:76px;width:68px;height:83px;
}
.box3{
background:url(imgs/iphone-4.png) left top no-repeat;position:absolute;left:350px;top:76px;width:68px;height:83px;
}
.box4{
background:url(imgs/iphone-5.png) left top no-repeat;position:absolute;left:20px;top:181px;width:68px;height:83px;
}
.box5{
background:url(imgs/iphone-6.png) left top no-repeat;position:absolute;left:130px;top:181px;width:68px;height:83px;
}
.box6{
background:url(imgs/iphone-7.png) left top no-repeat;position:absolute;left:240px;top:181px;width:68px;height:83px;
}
.box7{
background:url(imgs/iphone-8.png) left top no-repeat;position:absolute;left:350px;top:181px;width:68px;height:83px;
}
</style></head><body>
<div class="big_box">
<div class="boxs">
<div id="box_0" class="box0"></div>
<div id="box_1" class="box1"></div>
<div id="box_2" class="box2"></div>
<div id="box_3" class="box3"></div>
<div id="box_4" class="box4"></div>
<div id="box_5" class="box5"></div>
<div id="box_6" class="box6"></div>
<div id="box_7" class="box7"></div>
</div>
</div>
<div id="focus"></div>
<div id="buttons">
<table>
<tr>
<td></td>
<td><input type="button" id="up" value="上" onclick="actions(1)"/></td>
<td></td>
</tr>
<tr>
<td><input type="button" id="up" value="左"  onclick="actions(3)"/></td>
<td></td>
<td><input type="button" id="up"  value="右" onclick="actions(4)"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="up" value="下"  onclick="actions(2)"/></td>
<td></td>
</tr>
</table>
</div></body>
<script type="text/javascript" src="js/index.js"></script>
</html>var focus_left , focue_top;
var interval;
var right_count = 0;
var left_count = 0;
var up_count = 0;
var down_count = 0//初始化位置
function init(){
//IE 浏览器的方法
//var a = document.getElementById('focus').currentStyle.left;
//ff 浏览器的方法
//var a = document.getElementById('focus').style.left;
//alert(window.getComputedStyle(a,null).style.left);
focus_left = document.getElementById('focus').offsetLeft;//用offsetLeft属性可以接受到
focus_top = document.getElementById('focus').offsetTop;

}function rightMove(){
moving = 1;
if(focus_left<336){
document.getElementById('focus').style.left = ++focus_left + "px";
right_count++;
if(right_count==110){
clearInterval(interval);
right_count = 0;
}
}
else{
document.getElementById('focus').style.left = "6px";
focus_left = document.getElementById('focus').offsetLeft;
clearInterval(interval);
right_count = 0;
}
}function leftMove(){
if(focus_left>6){
document.getElementById('focus').style.left = --focus_left + "px";
left_count++;
if(left_count==110){
clearInterval(interval);
left_count = 0;
}
}
else{
document.getElementById('focus').style.left = "336px";
focus_left = document.getElementById('focus').offsetLeft;
clearInterval(interval);
left_count = 0;
}
}function upMove(){
if(focus_top>66){
document.getElementById('focus').style.top = --focus_top + "px";
up_count++;
if(up_count==105){
clearInterval(interval);
up_count = 0;
}
}
else{
document.getElementById('focus').style.top = "171px";
focus_top = document.getElementById('focus').offsetTop;
clearInterval(interval);
up_count = 0;
}
}function downMove(){
if(focus_top<171){
document.getElementById('focus').style.top = ++focus_top + "px";
down_count++;
if(down_count==105){
clearInterval(interval);
down_count = 0;
}
}
else{
document.getElementById('focus').style.top = "66px";
focus_top = document.getElementById('focus').offsetTop;
clearInterval(interval);
down_count = 0;
}
}function actions(direct){
// direct:   1上    2下    3左     4右
if(direct == 4){
if(moving==0){
interval = setInterval('rightMove()',10);
}
else{
alert("aaa");
}
}
else if(direct == 3){
interval = setInterval('leftMove()',10);
}
else if(direct == 2){
interval = setInterval('downMove()',10);
}
else if(direct == 1){
interval = setInterval('upMove()',10);
}
}eval('init()');
补上完全代码
修改index.js如下
var focus_left , focue_top;
var interval;
var right_count = 0;
var left_count = 0;
var up_count = 0;
var down_count = 0;
var moving=0;//初始化位置
function init(){
    //IE 浏览器的方法
    //var a = document.getElementById('focus').currentStyle.left;
    //ff 浏览器的方法
    //var a = document.getElementById('focus').style.left;
    //alert(window.getComputedStyle(a,null).style.left);
    focus_left = document.getElementById('focus').offsetLeft;//用offsetLeft属性可以接受到
    focus_top = document.getElementById('focus').offsetTop;

}function rightMove(){
    moving = 1;
    if(focus_left<336){
        document.getElementById('focus').style.left = ++focus_left + "px";
        right_count++;
        if(right_count==110){
            clearInterval(interval);
            right_count = 0;
            flag=true;
        }
    }
    else{
        document.getElementById('focus').style.left = "6px";
        focus_left = document.getElementById('focus').offsetLeft;
        clearInterval(interval);
        right_count = 0;
        flag=true;
    }
}function leftMove(){
    if(focus_left>6){
        document.getElementById('focus').style.left = --focus_left + "px";
        left_count++;
        if(left_count==110){
            clearInterval(interval);
            left_count = 0;
            flag=true;
        }
    }
    else{
        document.getElementById('focus').style.left = "336px";
        focus_left = document.getElementById('focus').offsetLeft;
        clearInterval(interval);
        left_count = 0;
        flag=true;
    }
}function upMove(){
    if(focus_top>66){
        document.getElementById('focus').style.top = --focus_top + "px";
        up_count++;
        if(up_count==105){
            clearInterval(interval);
            up_count = 0;
            flag=true;
        }
    }
    else{
        document.getElementById('focus').style.top = "171px";
        focus_top = document.getElementById('focus').offsetTop;
        clearInterval(interval);
        up_count = 0;
        flag=true;
    }
}function downMove(){
    if(focus_top<171){
        document.getElementById('focus').style.top = ++focus_top + "px";
        down_count++;
        if(down_count==105){
            clearInterval(interval);
            down_count = 0;
            flag=true;
        }
    }
    else{
        document.getElementById('focus').style.top = "66px";
        focus_top = document.getElementById('focus').offsetTop;
        clearInterval(interval);
        down_count = 0;
        flag=true;
    }
}var flag=true;
function actions(direct){
//        direct:   1上    2下    3左     4右
if(!flag) return;
flag=false;
        if(direct == 4){
            interval = setInterval('rightMove()',10);
        }
        else if(direct == 3){
            interval = setInterval('leftMove()',10);
        }
        else if(direct == 2){
            interval = setInterval('downMove()',10);
        }
        else if(direct == 1){
            interval = setInterval('upMove()',10);
        }
    }eval('init()');