javascript實作動態側邊欄程式碼_javascript技巧

總的來說就是利用 滑鼠懸停onmouseover   和  滑鼠移除onmouseout 這兩個時間來完成的。

首先是HTML 結構

複製程式碼 程式碼如下:

側邊欄

然後是css的樣式：

複製程式碼

程式碼如下:


#div1{

 >    height:200px;
    background:#999999;
    position:absolute;
       height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
;
預設的樣式 側邊欄是隱藏起來的如圖：

當滑鼠移入以後如圖：

以下是完整程式碼：

複製程式碼

程式碼如下: 程式碼如下:

<script> {<BR>    var odiv=document.getElementById('div1');<BR>   odiv.onmouseover=function ()<BR>   {<BR><BR>  div   left屬性的目標值   第二個為每次移動多少像素<BR><BR>       }<br>  odiv.onmouseout=function ()<br>  {<br> >      }<br>    }<BR><BR>    var timer=null;<BR>function startmove(target,speed)<BR>{<BR>function startmove(target,speed)<br>{<br>function startmove(target,speed)<BR>{<BR>function。 🎜>clearInterval(timer);<br>     timer=setInterval(function (){<br><BR>             clearInterval(timer);<BR>            }<br>            else<br>            {    <BR>          }<BR><BR>        },30)<BR><BR>    }<BR><BR></script>

側邊欄