JS モーションフレームワーク共有サイドバーアニメーションの例_JavaScript スキル

この記事の例では、JSモーションフレームワークでサイドバーアニメーションを共有する実装方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです: *{ マージン:0px; パディング:0px; } #div1{ 幅:319ピクセル; 高さ: 340ピクセル; 境界線: 1px 実線 #FFF; 位置: 絶対; 上:100ピクセル; 左:-320ピクセル; 背景画像: url(images/1.png); 背景リピート:リピートなし ; } #div1 スパン{ 幅:30ピクセル; 高さ: 130ピクセル; 境界線: 1 ピクセルの青一色。 位置: 絶対; 右:-23px; 上:95ピクセル; 背景: 赤; フォントファミリー: "微软雅黑"; 色: #FFFFFF; テキスト整列: 中央; 行の高さ: 40px; 境界半径: 0px 200px 200px 0px; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')[0]; var time=null; var 速度 = 8; oDiv.onmouseover=function(){//这里给整个div加ネズミ标移入的イベント クリアインターバル(時間); time=setInterval(function(){ If(oDiv.offsetLeft>=0){clearInterval(time);} oDiv.style.left=oDiv.offsetLeft 速度 'px'; },1); oDiv.onmouseout=function(){//マウスアウトイベントを div 全体に追加します に Time=setInterval(function(){ If(oDiv.offsetLeft oDiv.style.left=oDiv.offsetLeft-speed 'px'; },1);

& Lt; スパン & gt; & lt;/スパン & gt;

最適化されたコード:

コードをコピー

コードは次のとおりです: *{ マージン:0px; パディング:0px; } #div1{ 幅:319ピクセル; 高さ: 340ピクセル; 境界線: 1px 実線 #FFF; 位置: 絶対; 上:100ピクセル; 左:-320ピクセル; 背景画像: url(images/1.png); 背景リピート:リピートなし ; } #div1 スパン{ 幅:30ピクセル; 高さ: 130ピクセル; 境界線: 1 ピクセルの青一色。 位置: 絶対; 右:-23px; 上:95ピクセル; 背景: 赤; フォントファミリー: "微软雅黑"; 色: #FFFFFF; テキスト整列: 中央; 行の高さ: 40px; 境界半径: 0px 200px 200px 0px; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')[0]; var time=null; var spe=8; var 速度 = null; 関数 move(bord){ クリアインターバル(時間); time=setInterval(function(){ If(oDiv.offsetLeft>bord){speed=-spe;} If(oDiv.offsetLeft==bord){clearInterval(time);} oDiv.style.left=oDiv.offsetLeft 速度 'px'; },1); Odiv.onmouseover = Function () {// ここでは、div 全体にマウスを追加するイベント 移動(0); oDiv.onmouseout=function(){//マウスアウトイベントを div 全体に追加します 移動(-320);

& Lt; スパン & gt; & lt;/スパン & gt;

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

JS モーション フレームワーク共有サイドバー アニメーションの例_JavaScript スキル

JS モーションフレームワーク共有サイドバーアニメーションの例_JavaScript スキル