                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

老濕有個問題一直困擾我：

正常是這樣：
window.onload=function?()?{
????var?myName?=?document.getElementById("tddd");
????myName.onmouseover?=?function?()?{
????????startMove();
????}
}
????var?time?=?null;

????function?startMove()?{
????????clearInterval(time);
????????var?myName?=?document.getElementById("tddd");
????????setInterval(function?()?{
????????????if?(myName.offsetLeft?==?150)?{
????????????????clearInterval(time);
????????????}?else?{
????????????????myName.style.left?=?myName.offsetLeft?+?1?+?"px";
????????????}
????????},?30)
????}
????

第二種第二個函數是在第一個函數里面也就是startMove執行函數在鼠標事件函數里面{}，可以執行。????
window.onload=function?()?{
????var?myName?=?document.getElementById("tddd");
????myName.onmouseover?=?function?()?{
????????startMove();
????}

????var?time?=?null;

????function?startMove()?{
????????clearInterval(time);
????????var?myName?=?document.getElementById("tddd");
????????setInterval(function?()?{
????????????if?(myName.offsetLeft?==?150)?{
????????????????clearInterval(time);
????????????}?else?{
????????????????myName.style.left?=?myName.offsetLeft?+?1?+?"px";
????????????}
????????},?30)
????}
????}
增加一個移開事件onmouseout之后，按照第二種，移開鼠標物體繼續向前運動。這個是怎么回事，老濕幫幫解釋下。。。。。。。。。。。。

慕俠6683825

2015-09-09

源自：JS動畫效果

關注問題我要回答

518

操作

收起

1 回答

慕俠6683825 提問者
2015-09-09

移開是這樣：

window.onload=function?()?{
????var?myName?=?document.getElementById("tddd");
????myName.onmouseover?=?function?()?{
????????startMove();
????}
????myName.onmouseout?=?function?()?{
????????startMove1();
????}

????var?time?=?null;
????function?startMove()?{??????
????????clearInterval(time);
????????var?myName?=?document.getElementById("tddd");
????????setInterval(function?()?{
????????????if?(myName.offsetLeft?==?150)?{
????????????????clearInterval(time);
????????????}?else?{
????????????????myName.style.left?=?myName.offsetLeft?+1?+?"px";
????????????}
????????},?30)
????}
????function?startMove1()?{
????????clearInterval(time);
????????var?myName?=?document.getElementById("tddd");
????????setInterval(function?()?{
????????????if?(myName.offsetLeft?==?-20)?{
????????????????clearInterval(time);
????????????}?else?{
????????????????myName.style.left?=?myName.offsetLeft?-1?+?"px";
????????????}
????????},?30)
????}
}

結果是移開物體繼續向前走，


正常是這樣：

window.onload=function?()?{
????var?myName?=?document.getElementById("tddd");
????myName.onmouseover?=?function?()?{
????????startMove();
????}
????myName.onmouseout?=?function?()?{
????????startMove1();
????}
????}

????var?time?=?null;
????function?startMove()?{??????
????????clearInterval(time);
????????var?myName?=?document.getElementById("tddd");
????????setInterval(function?()?{
????????????if?(myName.offsetLeft?==?150)?{
????????????????clearInterval(time);
????????????}?else?{
????????????????myName.style.left?=?myName.offsetLeft?+1?+?"px";
????????????}
????????},?30)
????}
????function?startMove1()?{
????????clearInterval(time);
????????var?myName?=?document.getElementById("tddd");
????????setInterval(function?()?{
????????????if?(myName.offsetLeft?==?-20)?{
????????????????clearInterval(time);
????????????}?else?{
????????????????myName.style.left?=?myName.offsetLeft?-1?+?"px";
????????????}
????????},?30)
????}