发新贴  快速回复

运动没完成时再次触发事件的问题

sz19890507
2013-05-13 10:32
 本帖最后由 sz19890507 于 2013-5-13 10:39 编辑 

[html]<!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=utf-8" />
<title>无标题文档</title>
<style>
.ul1 { position:relative;}
.ul1 li { display:block; width:200px; height:200px; border:1px solid #000; position:absolute; left:700px;}
.ul2 { float:left;}
</style>
<script>
window.err==function ()
{
        var aLi2=document.getElementsByTagName('ul')[0].children;
        var aLi1=document.getElementsByTagName('ul')[1].children;
        
        for (var i=0;i<aLi2.length;i++)
        {
                aLi2[i].index=i;
                aLi2[i].err==function ()
                {
                        for (var i=0;i<aLi1.length;i++)
                        {
                                aLi1[i].style.left=700+'px';
                        }
                        startMove(aLi1[this.index],{left:100});
                }
        }
}
function getStyle (obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}

function startMove(obj, json, Fn)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function ()
    {
        var sTop=true;
        for(var attr in json){
            var cur=0;
            if(attr=='opacity')
            {
                cur=Math.round(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                cur=parseInt(getStyle(obj, attr));
            }
            
            var speed=(json[attr]-cur)/8;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(cur!=json[attr])
            {
                sTop=false;
            }
            
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=(cur+speed)+'px';
            }
        }
        if(sTop)
        {
            clearInterval(obj.timer);
            
            if(Fn){Fn();}
        }
    },30);
}
</script>
</head>

<body>
<ul class="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
<ul class="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
</ul>
</body>
</html>[/html]

如果li运动没有完成就点击下一个标题,会有两个同时动的情况,这个问题怎么解决啊?
jhr5872935
点完以后先清除所有点击事件,然后运动,当运动完成以后再把所有的事件还原。
[html]<!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=utf-8" />
<title>无标题文档</title>
<style>
.ul1 { position:relative;}
.ul1 li { display:block; width:200px; height:200px; border:1px solid #000; position:absolute; left:700px;}
.ul2 { float:left;}
</style>
<script>
window.err==function ()
{
        var aLi2=document.getElementsByTagName('ul')[0].children;
        var aLi1=document.getElementsByTagName('ul')[1].children;
        
        function clika()
        {
        
            for (var i=0;i<aLi2.length;i++)
            {
                aLi2[i].index=i;
                aLi2[i].err==function ()
                {
                        clikb();
                        
                        for (var i=0;i<aLi1.length;i++)
                        {
                                aLi1[i].style.left=700+'px';
                        }
                        startMove(aLi1[this.index],{left:100},function()
                        {
                        
                            clika();
                        
                        });
                }
            }
        
        }
        clika();
        function clikb()
        {
            
            for (var i=0;i<aLi2.length;i++)
            {
            
                aLi2[i].err==null;
            
            }
            
        }
}
function getStyle (obj, name)
{
        if(obj.currentStyle)
        {
                return obj.currentStyle[name];
        }
        else
        {
                return getComputedStyle(obj, false)[name];
        }
}

function startMove(obj, json, Fn)
{
        clearInterval(obj.timer);
        obj.timer=setInterval(function ()
        {
                var sTop=true;
                for(var attr in json){
                        var cur=0;
                        if(attr=='opacity')
                        {
                                cur=Math.round(parseFloat(getStyle(obj, attr))*100);
                        }
                        else
                        {
                                cur=parseInt(getStyle(obj, attr));
                        }
                        
                        var speed=(json[attr]-cur)/8;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        
                        if(cur!=json[attr])
                        {
                                sTop=false;
                        }
                        
                        if(attr=='opacity')
                        {
                                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                                obj.style.opacity=(cur+speed)/100;
                        }
                        else
                        {
                                obj.style[attr]=(cur+speed)+'px';
                        }
                }
                if(sTop)
                {
                        clearInterval(obj.timer);
                        
                        if(Fn){Fn();}
                }
        },30);
}
</script>
</head>

<body>
<ul class="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
<ul class="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
</ul>
</body>
</html>[/html]
2013-05-13 12:03  回复本帖
sz19890507
jhr5872935 发表于 2013-5-13 12:03 forum.php?mod=redirect&goto=findpost&pid=19380&ptid=6766
点完以后先清除所有点击事件,然后运动,当运动完成以后再把所有的事件还原。
[html]



那有没有不清楚事件,也能做到的方法呢?
2013-05-13 13:01  回复本帖
jhr5872935
sz19890507 发表于 2013-5-13 13:01 forum.php?mod=redirect&goto=findpost&pid=19381&ptid=6766
那有没有不清楚事件,也能做到的方法呢?

还有开关的方法,不过你自己也得思考哦。尽力自己去解决。
[html]<!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=utf-8" />
<title>无标题文档</title>
<style>
.ul1 { position:relative;}
.ul1 li { display:block; width:200px; height:200px; border:1px solid #000; position:absolute; left:700px;}
.ul2 { float:left;}
</style>
<script>
window.err==function ()
{
        var aLi2=document.getElementsByTagName('ul')[0].children;
        var aLi1=document.getElementsByTagName('ul')[1].children;
        var bs=false;
        for (var i=0;i<aLi2.length;i++)
        {
                aLi2[i].index=i;
                aLi2[i].err==function ()
                {        
                        if(!bs)
                        {
                            for (var i=0;i<aLi1.length;i++)
                            {
                                    aLi1[i].style.left=700+'px';
                            }
                            startMove(aLi1[this.index],{left:100},function()
                            {
                                bs=false;
                            });
                        }
                        bs=true;
                }
        }
}
function getStyle (obj, name)
{
        if(obj.currentStyle)
        {
                return obj.currentStyle[name];
        }
        else
        {
                return getComputedStyle(obj, false)[name];
        }
}

function startMove(obj, json, Fn)
{
        clearInterval(obj.timer);
        obj.timer=setInterval(function ()
        {
                var sTop=true;
                for(var attr in json){
                        var cur=0;
                        if(attr=='opacity')
                        {
                                cur=Math.round(parseFloat(getStyle(obj, attr))*100);
                        }
                        else
                        {
                                cur=parseInt(getStyle(obj, attr));
                        }
                        
                        var speed=(json[attr]-cur)/8;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        
                        if(cur!=json[attr])
                        {
                                sTop=false;
                        }
                        
                        if(attr=='opacity')
                        {
                                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                                obj.style.opacity=(cur+speed)/100;
                        }
                        else
                        {
                                obj.style[attr]=(cur+speed)+'px';
                        }
                }
                if(sTop)
                {
                        clearInterval(obj.timer);
                        
                        if(Fn){Fn();}
                }
        },30);
}
</script>
</head>

<body>
<ul class="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
<ul class="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
</ul>
</body>
</html>[/html]
2013-05-13 14:27  回复本帖
sz19890507
jhr5872935 发表于 2013-5-13 14:27 forum.php?mod=redirect&goto=findpost&pid=19384&ptid=6766
还有开关的方法,不过你自己也得思考哦。尽力自己去解决。
[html]



{:soso_e183:} 非常感谢{:soso_e179:} 
2013-05-13 16:36  回复本帖
sz19890507
jhr5872935 发表于 2013-5-13 14:27 forum.php?mod=redirect&goto=findpost&pid=19384&ptid=6766
还有开关的方法,不过你自己也得思考哦。尽力自己去解决。
[html]



呃```这个开关没看明白,能讲解一下么老师```
2013-05-13 17:09  回复本帖
jhr5872935
sz19890507 发表于 2013-5-13 17:09 forum.php?mod=redirect&goto=findpost&pid=19389&ptid=6766
呃```这个开关没看明白,能讲解一下么老师```

点击按钮以后,如果bs为假,就执行运动(运动完成以后再将bs设置回假),然后将bs设置为真(上一个运动没有完成就不会执行下一个运动)。
2013-05-13 17:38  回复本帖
sz19890507
jhr5872935 发表于 2013-5-13 17:38 forum.php?mod=redirect&goto=findpost&pid=19391&ptid=6766
点击按钮以后,如果bs为假,就执行运动(运动完成以后再将bs设置回假),然后将bs设置为真(上一个运动没 ...

在给bs赋值为true之前.bs不是一直都是false么?为什么还要在运动结束后再给他一个假?
2013-05-13 17:44  回复本帖
jhr5872935
sz19890507 发表于 2013-5-13 17:44 forum.php?mod=redirect&goto=findpost&pid=19393&ptid=6766
在给bs赋值为true之前.bs不是一直都是false么?为什么还要在运动结束后再给他一个假? ...

点击按钮先执行运动的那些代码,然后再将bs设置为真,运动完成以后,bs还是真,这个时候不把bs设置为假就无法再进行下一步运动了。
2013-05-13 17:54  回复本帖
sz19890507
jhr5872935 发表于 2013-5-13 17:54 forum.php?mod=redirect&goto=findpost&pid=19394&ptid=6766
点击按钮先执行运动的那些代码,然后再将bs设置为真,运动完成以后,bs还是真,这个时候不把bs设置为假就 ...

好像有点明白了,我去做两个练习,谢谢老师
2013-05-13 18:21  回复本帖
登录 后才可以发表回复