快捷導(dǎo)航

javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼

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

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

總的來說就是利用鼠標(biāo)懸停onmouseover 和鼠標(biāo)移除onmouseout 這兩個(gè)時(shí)間來完成的。

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

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

然后是css的樣式：

復(fù)制代碼代碼如下:

#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;}

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

當(dāng)鼠標(biāo)移入以后如圖：

下面是完整代碼：

復(fù)制代碼代碼如下:

<!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>無標(biāo)題文檔</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);//第一個(gè)參數(shù)為div   left屬性的目標(biāo)值   第二個(gè)為每次移動(dòng)多少像素

       }
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>

您可能感興趣的文章:

相關(guān)文章

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