一般に、マウスホバーオンマウスオーバーとマウスの除去を使用して行われます。
最初はHTML構造です
コードコピーは次のとおりです。
<body>
<div id = "div1">
<span>サイドバー</span>
</div>
</body>
次に、CSSのスタイルがあります。
コードコピーは次のとおりです。
＃div1 {
幅：150px;
高さ：200px;
背景：＃999999;
ポーズ：絶対;
左：-150px;}
スパン{
幅：20px;
高さ：70px;
ラインハイト：23px;
背景：＃09c;
ポーズ：絶対;
右：-20px;
トップ：70px;}
デフォルトのスタイルのサイドバーは、図に示すように隠されています。
図に示すように、マウスが移動したとき：
これが完全なコードです：
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> un unt ittitled document </title>
<style type = "text/css">
＃div1 {
幅：150px;
高さ：200px;
背景：＃999999;
ポーズ：絶対;
左：-150px;}
スパン{
幅：20px;
高さ：70px;
ラインハイト：23px;
背景：＃09c;
ポーズ：絶対;
右：-20px;
トップ：70px;}
</style>
<スクリプト>
window.onload = function（）{
var odiv = document.getElementById（ 'div1'）;
odiv.onmouseover = function（）
{{
startmove（0,10）; //最初のパラメーターは、div左属性のターゲット値です。
}
odiv.onmouseout = function（）
{{
StartMove（-150、-10）;
}
}
varタイマー= null;
関数StartMove（ターゲット、速度）
{{
var odiv = document.getElementById（ 'div1'）;
ClearInterval（タイマー）;
Timer = setInterval（function（）{
if（odiv.offsetLeft ==ターゲット）
{{
ClearInterval（タイマー）;
}
それ以外
{{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
}、30）
}
</script>
</head>
<body>
<div id = "div1">
<span>サイドバー</span>
</div>
</body>
</html>