JS動畫 移入移出

2021-09-01 02:32:39 字數 1327 閱讀 9925

移入移出動畫效果的實現主要用到了定時器。定時器即 setinterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。它會不停地呼叫函式,直到clearinterval() 被呼叫或視窗被關閉。由 setinterval() 返回的 id 值可用作 clearinterval() 方法的引數。

html

share

css

div

span

js,移出效果就是改變該元素絕對定位的 left 的值,判斷到了0位置時候結束,清除定時器。移入效果則完全相反。

var odiv=document.getelementbyid("div");

odiv.onmouseover=function();

odiv.onmouseout=function()

var timer=null;

function startmove()else

},30);

}function startmoveout()else

},30);

}

上述**顯然是可以優化的,實現同樣功能的函式,可以通過傳參來壓縮成乙個函式。觀察兩個函式,它們的差別就在於判斷的目標位置不同,移動時改變的距離不同。

var odiv=document.getelementbyid("div");

odiv.onmouseover=function();

odiv.onmouseout=function()

var timer=null;

function startmove(speed,itarget)else

},30);

}

為了提公升效能,傳參的數量越少越好。比較引數speed和itarget,其中更重要關鍵的引數應該是itarget,可聯想日常生活中買火車票必須確定自己的目的地,但是速度無所謂的,因為有綠皮火車,動車,高鐵...

var odiv=document.getelementbyid("div");

odiv.onmouseover=function();

odiv.onmouseout=function()

var timer=null;

function startmove(itarget)else

if(odiv.offsetleft == itarget)else

},30);

}

移入移出的動畫效果實現不是最關鍵的,主要的是學會對**的優化是要一步一步的,最大可能精簡程式的效能。

滑鼠移入移出事件

js給網頁新增互動 功能 修改樣式。核取方塊 滑鼠提示框 將滑鼠移入核取方塊,div顯示 display block 滑鼠移出核取方塊,div隱藏 display none 事件 使用者的操作,onmouseover 滑鼠移入事件,onmouseout 滑鼠移出事件 testing mouseeve...

PowerBuilder滑鼠移入移出事件

powerbuilder中只有視窗和富文字有mouse事件外,其他都沒有 powerbuiler中沒有滑鼠移入移出的直接事件,需要我們自己定義 1.首先需要定義乙個結構,用來儲存滑鼠的座標 position 2.宣告兩個全域性外部函式 3.新增timer 在在視窗的open事件或者某個觸發事件中新增...

jquery滑鼠移入變色移出恢復

一 需求說明 現需要對乙個 的內容部分做下高亮處理 當滑鼠放到這一行時,背景色發生改變 當滑鼠移出這一行時,恢復這一行的原有背景色。如下圖,原來是除了首行以外,帶序號的內容部分,奇偶行背景色交替變化,當滑鼠放到第1行時,看到下圖的樣式,移出該行後,恢復原樣。二 實現 table及樣式部分 序號 姓名...