Javascript は動的なサイドバー コードを実装します_JavaScript スキル

一般的にはマウスホバーonmouseoverとマウス離しonmouseoutの2回で完了します。

最初は HTML 構造です

コードをコピー コードは次のとおりです。

< div id= "div1">
サイドバー

次に CSS スタイル:

コードをコピー コードは次のとおりです:

#div1{
width:150px ;
高さ:200px;
背景:#999999;
位置:絶対;
左:-150px;}
スパン{
幅:20px;
高さ:70px ;
line-height:23px;
背景:#09C;
位置:絶対;
右:-20px;
上:70px;}

デフォルトのスタイルのサイドバーは、図に示すように非表示になります:

マウスを移動すると、次のようになります:

完全なコードは次のとおりです:

コードをコピーします コードは次のとおりです:

< ;script>
window.onload=function(){
var odiv=document.getElementById('div1');
odiv.onmouseover=function ()
{

startmove (0,10);//最初のパラメータは div の left 属性のターゲット値です 2 番目のパラメータは毎回移動するピクセル数です

}
odiv.onmouseout= function ()
{
startmove(-150,-10);
}
}

var timer=null;
function startmove(target,speed)
{

var odiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){

if(odiv.offsetLeft ==target)
{
clearInterval(timer);
}
else
odiv.style.left=odiv.offsetLeft 速度 'px';
}

}

サイドバー