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)
復(fù)制代碼 代碼如下:
<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>
<body>
<div id="div1">
<span>側(cè)邊欄</span>
</div>
</body>
</html>
您可能感興趣的文章:
- 博客側(cè)邊欄模塊跟隨滾動(dòng)條滑動(dòng)固定效果的實(shí)現(xiàn)方法(js+jquery等)
- JavaScript實(shí)現(xiàn)簡單的隱藏式側(cè)邊欄功能示例
- javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解
- 利用js編寫響應(yīng)式側(cè)邊欄
- JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果
- 基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效
- JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫實(shí)例
- JavaScript中實(shí)現(xiàn)無縫滾動(dòng)、分享到側(cè)邊欄實(shí)例代碼
- JS實(shí)現(xiàn)京東商品分類側(cè)邊欄
- js實(shí)現(xiàn)淘寶固定側(cè)邊欄
相關(guān)文章
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05