スライドナビゲーションバー

不透明度プロパティ不透明度レベルの
フィルタ(フィルタ)プロパティ
左属性は、要素の左端を指定します。この属性は、ブロックとその左側の境界との間のオフセットを含む要素を標的の左境界の外縁を規定します。

offsetHeight:レイアウトに対する物体の高さを取得または親によって指定された座標は、親offsetParentのプロパティ座標
offsetLeft:レイアウトまたは左の位置に取得するオブジェクトの相対指定することによって計算される親offsetParentのプロパティ座標
offsetTop:offsetTopに対してレイアウトまたはオブジェクトのプロパティを取得します先端位置を計算する親座標指定
のonmouseover:マウスポインタが移動要素をトリガするとき

たsetInterval()を設定する機能の動作をキャンセルするタイミングてclearInterval()メソッド。clearIntervalパラメータは、()メソッドのsetInterval()リターンのID値でなければなりません。
clearInterval()メソッドを使用する、グローバルを使用して操作実行タイミングを作成する場合:myVarに=のsetInterval(「javascript関数」、ミリ秒)。

obj.offsetLeft:親オブジェクト距離に対して左を取得し;
obj.style.left:親オブジェクトのプロパティに対して左を取得または設定位置(位置に対して定義された)距離を有します

同じ点:
親要素は、相対位置、絶対位置定義サブ要素が定義されている場合、親DIVの値に対してobj.style.left子要素の値は、obj.offsetLeft値がtrueです。
違い:

文字列(例えばは50px)を返しobj.style.left、obj.offsetLeftが値を返す(例えば、50)
書き込み可能なobj.style.left、obj.offsetLeft読み取り専用
obj.style.leftの値を定義する必要があり、そうでなければ、それはnullにあります。そして、それはラベルで定義されている必要があり
obj.style.left下IE7ではなく、IE7での互換性をobj.offsetLeft。




<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>ナビゲーションバーをスライド</ TITLE>
<スタイルタイプ= "テキスト/ CSS">
#ul {
幅:360px;
高さ:40ピクセル;
マージン:オート30px;
位置:相対;親要素に対応する位置を相対的に定義されている場合/ * JSリアに対して定義obj.style.leftは、子要素が設けられています。親DIVの値に対してobj.style.left子要素の絶対、値、obj.offsetLeft値がtrueであるような位置が定義されます。* /
背景:#eee;
パディング:0;
ボーダーRADIUS:10pxの;
}
#ulリー{
幅:80px;
高さ:25ピクセル;
マージン:5pxのに5pxの;
パディング:0;
行の高さ:25ピクセル。

左;フロート
テキストALIGN =左:センター;
カーソル:ポインタ;
}
#ul li.mli {
位置:絶対;
幅:80px;
高さ:25ピクセル、
背景:赤;
左:0;
トップ:0;
不透明度:0.5;
フィルタ:アルファ(不透明度= 50);
ボーダー-RADIUS:10pxの

}
</スタイル>
<SCRIPT SRC = "move.js"> </ SCRIPT>
<スクリプトタイプ= "テキスト/ JavaScriptを">
//ナビゲーション原則バー:アクセラレータを使用して減速、加速走行速く、減速減速0リターンに等しくなります。アナログ摩擦:速度* = 0.7、及び最終的に等しいispeed 0;
/ *は、ブロックを定義し、ステートメントは画素* /条件は、次に移動している判断した場合、その後のJSを書き込む
window.onload =関数(){
VAR OUL =のdocument.getElementById( 'UL') 。
oUl.getElementsByTagName ALI = VAR( 'リー');
VAR iSpeed = 0;
= 0のvar lLeft;
VARタイマ= NULL;
(; I ++ I = 0に対するその動きのLi {// ; iはaLi.length-1 <) 横切らない
アリ[I] .onmouseover =関数(){
Tmove(ALI [-aLi.length 1]、this.offsetLeft)
}

}

関数Tmove(OBJ、Itarget){
;てclearInterval(タイマ)
タイマのsetInterval(関数(=)を{
iSpeed + =(Itarget-obj.offsetLeft)/ 5; //速度式
iSpeed * = 0.7; //アナログ摩擦
lLeft iSpeed + =;
/ *現在の速度が十分* /実行された目標停止位置カウンタに十分近い小さい位置である
IFを( math.abs(iSpeed <1)&& math.abs(obj.offsetLeft <1)){
てclearInterval(タイマ)。
obj.style.left = iTarget + 'PXは'; / * 文字列を返すためobj.style.left(は50px)、及びobj.offsetLeft(50)* /
}他{
obj.style.left lLeft + = 'PX' ;
}
}、30)/ *機能を実行するすべての30msのは* /
}

}
</ SCRIPT>
</ head>
<body>
<UL ID = "UL">
<LI>ホーム</ LI>
<LI>個人の導入< / LI>
<LI>サービスセンター</ LI>
<LI>芸能界</ LI>
<LIクラス= "MLI"> </ LI>
</ UL>
</ BODY>
</ HTM

おすすめ

転載: www.cnblogs.com/Damocless/p/11755151.html