javascript實現(xiàn)動態(tài)側(cè)邊欄代碼

更新時間：2014年02月19日 14:42:30 作者：

這篇文章主要介紹了javascript實現(xiàn)動態(tài)側(cè)邊欄代碼,需要的朋友可以參考下

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

首先是HTML 結(jié)構(gòu)

<body>
<div id="div1">
<span>側(cè)邊欄</span>
</div>
</body>

然后是css的樣式：

復制代碼代碼如下:

#div1{
    width:150px;
    height:200px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:20px;
    height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}

默認的樣式側(cè)邊欄是隱藏起來的如圖：

當鼠標移入以后如圖：

下面是完整代碼：

復制代碼代碼如下:

<!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>無標題文檔</title>
<style type="text/css">
#div1{
    width:150px;
    height:200px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:20px;
    height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}
</style>
<script>
window.onload=function(){
    var odiv=document.getElementById('div1');
   odiv.onmouseover=function ()
   {

        startmove(0,10);//第一個參數(shù)為div   left屬性的目標值   第二個為每次移動多少像素

       }
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+speed+'px';
            }

        },30)

    }

</script>
</head>

您可能感興趣的文章:

微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
javascript算法題求任意一個1-9位不重復的N位數(shù)在該組合中的大小排列序號
從1--9中選取N個數(shù)字，組成不重復的N位數(shù)，從小到大進行編號，當輸入其中任何一個數(shù)M時，能找出該數(shù)字對應的編號
2012-07-07
JS實現(xiàn)水平遍歷和嵌套遞歸操作示例
這篇文章主要介紹了JS實現(xiàn)水平遍歷和嵌套遞歸操作,結(jié)合實例形式分析了javascript遍歷與遞歸相關操作技巧,需要的朋友可以參考下
2019-08-08
js禁止查看源文件屏蔽Ctrl+u/s、F12、右鍵等兼容IE火狐chrome
最近想給JS特效與模板預覽頁面加上屏蔽查看源文件，防治整理不易的源碼被輕易拿走，發(fā)現(xiàn)IE、火狐、chrome等各類瀏覽器支持不一樣。下面是腳本之家整理的一些屏蔽總結(jié)
2020-10-10
利用JavaScript實現(xiàn)新聞滾動效果(實例代碼)
這篇文章主要是對利用JavaScript實現(xiàn)新聞滾動效果的兩種方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
微信小程序?qū)崿F(xiàn)橫向滾動條
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)橫向滾動條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法
這篇文章主要介紹了JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法,涉及javascript鼠標事件響應及頁面元素的獲取、屬性設置等相關操作技巧,需要的朋友可以參考下
2017-10-10
JavaScript設計模式之代理模式實例分析
這篇文章主要介紹了JavaScript設計模式之代理模式,簡單描述了代理模式的概念、原理并結(jié)合實例形式分析了javascript代理模式的相關實現(xiàn)與使用技巧,需要的朋友可以參考下
2019-01-01
JS判斷客服QQ號在線還是離線狀態(tài)的方法
這篇文章主要介紹了JS判斷客服QQ號在線還是離線狀態(tài)的方法,可實現(xiàn)完整的判斷QQ在線及對話的功能,是非常實用的技巧,需要的朋友可以參考下
2015-01-01