Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Перемещение объекта


Автор: Цербер 27.6.2008, 09:36
Доброе время суток!
Есть функция которая перемещает объект, визуально это перемещение видно и всё нормально работает, но работает только в FF а IE он при перемещении, создаёт дубликат объекта и этот дубликат перемещает а оригинал остаётся на месте, ну а в Opera совсем не работает=(
В JavaScript я тока начинаю, не судите строго!
Помогите пожалуста!
Вот код:
HTML
Код

<a href="#" onclick="move_going('going',10,5,'forward',500,500)">Переместить</a>
<a href="#" onclick="move_going('going',10,5,'back',250,250)">Вернуть</a>
<img src="img/counter.jpg" id="going" style="position:absolute; top:250px; left:250px;"/>

JavaScript
Код

function going_div(id,need_top,need_left,flag,step)
{
    theObj = document.getElementById(id);
    now_top = theObj.style.top.replace(/px/,"");
    now_left = theObj.style.left.replace(/px/,"");
    if(flag=='forward')
    {
        if(Number(need_top)<=Number(now_top))
        {
            clearInterval(inter_id);    
        }
        else 
        {
            new_top= Number(now_top)+Number(step);
            theObj.style.top=new_top + 'px';    
            new_left = Number(now_left)+Number(step);
            theObj.style.left=new_left + 'px';
        }
    }
    else if(flag=='back')
    {
        if(Number(need_top)>=Number(now_top))
        {
            clearInterval(inter_id);    
        }
        else 
        {
            new_top= Number(now_top)-Number(step);
            theObj.style.top=new_top + 'px';    
            new_left = Number(now_left)-Number(step);
            theObj.style.left=new_left + 'px';
        }        
    }
    
}
function move_going(id,interval,step,flag,need_top,need_left)
{
    function going()
    {
        going_div(id,need_top,need_left,flag,step);    
    }
    inter_id = window.setInterval(going,interval);
}

Автор: Ghirik 27.6.2008, 09:44
Проверил во всех браузерах - работает.

Код

<!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" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title block</title>
<style type="text/css">

</style>
<script type="text/javascript">
<!-- // --><![CDATA[

function going_div(id,need_top,need_left,flag,step)
{
    theObj = document.getElementById(id);
    now_top = theObj.style.top.replace(/px/,"");
    now_left = theObj.style.left.replace(/px/,"");
    if(flag=='forward')
    {
        if(Number(need_top)<=Number(now_top))
        {
            clearInterval(inter_id);    
        }
        else 
        {
            new_top= Number(now_top)+Number(step);
            theObj.style.top=new_top + 'px';    
            new_left = Number(now_left)+Number(step);
            theObj.style.left=new_left + 'px';
        }
    }
    else if(flag=='back')
    {
        if(Number(need_top)>=Number(now_top))
        {
            clearInterval(inter_id);    
        }
        else 
        {
            new_top= Number(now_top)-Number(step);
            theObj.style.top=new_top + 'px';    
            new_left = Number(now_left)-Number(step);
            theObj.style.left=new_left + 'px';
        }        
    }
    
}

function move_going(id,interval,step,flag,need_top,need_left)
{
    function going()
    {
        going_div(id,need_top,need_left,flag,step);    
    }
    inter_id = window.setInterval(going,interval);
}

// ]]>
</script>
</head>
<body>

<a href="#" onclick="move_going('going',10,5,'forward',500,500)">Переместить</a>
<a href="#" onclick="move_going('going',10,5,'back',250,250)">Вернуть</a>
<img src="img/counter.jpg" id="going" style="position:absolute; top:250px; left:250px;" width="190" height="100"/>

</body>
</html>


Наверное неправильно собрали страничку.

Автор: Цербер 27.6.2008, 09:58
Ghirik
Цитата

Наверное неправильно собрали страничку.

Прислушался к вашим словам и удалил всё со страницы кроме этого кода.
В итоге IE перестал глюкать и изображение перестало дублироваться.
и ещё заметил что не добавил в ссылку return false
<a href="#" onclick="move_going('going',10,5,'forward',500,500); return false">
<a href="#" onclick="move_going('going',10,5,'back',250,250);  return false">
Огромное спасибо!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)