javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼
總的來(lái)說(shuō)就是利用 鼠標(biāo)懸停onmouseover 和 鼠標(biāo)移除onmouseout 這兩個(gè)時(shí)間來(lái)完成的。
首先是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;}
默認(rèn)的樣式 側(cè)邊欄是隱藏起來(lái)的如圖:
當(dāng)鼠標(biāo)移入以后如圖:
下面是完整代碼:
<!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>無(wú)標(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)簡(jiǎn)單的隱藏式側(cè)邊欄功能示例
- javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解
- 利用js編寫(xiě)響應(yīng)式側(cè)邊欄
- JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果
- 基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效
- JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà)實(shí)例
- JavaScript中實(shí)現(xiàn)無(wú)縫滾動(dòng)、分享到側(cè)邊欄實(shí)例代碼
- JS實(shí)現(xiàn)京東商品分類(lèi)側(cè)邊欄
- js實(shí)現(xiàn)淘寶固定側(cè)邊欄
相關(guān)文章
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05js模擬實(shí)現(xiàn)京東詳情頁(yè)圖片放大效果
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)京東詳情頁(yè)圖片放大效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11