[作業]は、動的動画をJS

<!DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< メタ文字コード= "UTF-8" > 
< リンクのrel = "スタイルシート" のhref = "CSS / new_file.css"  /> 
< スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS /new_file.js」 > </ スクリプト> 
< タイトル> </ タイトル> 
</ ヘッド> 
< 身体> 
< div要素のid = "mapDiv"= "位置:絶対;トップ:100pxに、左:200pxの、幅800ピクセル、高さ:600PX;ボーダー:1ピクセル赤色固体;テキスト整列:センター;" > 
< 入力タイプ= "ボタン" = "開始" ID = "ST"  /> 
< DIV ID = "T" のスタイルを= '幅:は50px; 背景:URL(IMG / t1.png);高さ:48px;位置:相対;左:0PX、背景サイズ:は50px自動;上部:100pxに、」> </ divの> 
< DIV ID = "R" スタイル= '幅:は50px; 背景:URL(IMG / t1.png);高さ:48px;位置:相対;左:0PX、背景サイズ:は50px自動;上部:200pxの;」> </ DIV >
</ DIV > 
</ ボディ> 
< スクリプトタイプ= "テキスト/ javascriptの" > 
VARの配列= [ " IMG / t1.png " " IMG / t3.png " " IMG / t6.png " ]。
VaRのintervalInstance =  - 1 ; 
I =  0 ; 

関数の開始()
{ 
TOBJ = のdocument.getElementById(" T " )。
rObj =document.getElementById(" R " )。
intervalInstance = たsetInterval(移動、100 )。

} 

関数移動()
{ 
TL = のparseInt(tObj.style.left.split(" PX " )[ 0 ])。
RL = のparseInt(rObj.style.left.split(" PX " )[ 0 ])。
もし(RL <= 725 )は、I = (I + 1 3 

{ 
てclearInterval(intervalInstance)。
返します
} 
tObj.style.left = (TL + 10 +  " PX " 
tObj.style.backgroundImage =  " URL(" + 配列[ 0 ] [I] + " " 
rObj.style.left = (RL + 25 +  " PX " 
rObj.style.backgroundImage =  " URL(" + 配列[ 0 ] [I] + " "; 
} 

window.onload =  関数()
{ 
のdocument.getElementById(" ST " ).onclick = 始めます。
} 
</ スクリプト> 
</ HTML >

 

おすすめ

転載: www.cnblogs.com/dofstar/p/11570629.html