javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解
更新時(shí)間：2016年11月11日 14:10:50 投稿：lqh
這篇文章主要介紹了javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)理解，需要的朋友可以參考下
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的樣式：
#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)移入以后如圖：
下面是完整代碼：
<!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>
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
- 博客側(cè)邊欄模塊跟隨滾動(dòng)條滑動(dòng)固定效果的實(shí)現(xiàn)方法(js+jquery等)
- javascript實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄代碼
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的隱藏式側(cè)邊欄功能示例
- 利用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)文章
這篇文章主要介紹了JavaScript獲取頁面元素的常用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript 學(xué)習(xí)點(diǎn)滴記錄
HTML DOM (Document Object Model文檔對(duì)象模型) DOM是一種與瀏覽器，平臺(tái)，語言的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合.2009-04-04
本篇文章主要介紹了詳解tween.js 中文使用指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
在JavaScript中實(shí)現(xiàn)類的方式探討
在 javascript 中有很多方式來創(chuàng)建對(duì)象，所以創(chuàng)建對(duì)象的方式使用起來非常靈活，到底哪一種方式是最恰當(dāng)呢？下面為大家講講2013-08-08
javascript實(shí)現(xiàn)修改微信分享的標(biāo)題內(nèi)容等
這篇文章主要介紹了javascript實(shí)現(xiàn)修改微信分享的標(biāo)題內(nèi)容等,需要的朋友可以參考下2014-12-12
cocos2dx骨骼動(dòng)畫Armature源碼剖析(三)
本篇文章給大家分享cocos2dx骨骼動(dòng)畫Armature源碼剖析(三)，代碼附有注釋，介紹的非常詳細(xì)，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了npm包全局安裝和局部安裝過程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
使用枚舉我們可以定義一些帶名字的常量,本文主要介紹了typescript枚舉的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
淺析Javascript中雙等號(hào)(==)隱性轉(zhuǎn)換機(jī)制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(hào)(==)隱性轉(zhuǎn)換機(jī)制，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
這個(gè)問題弄了我?guī)滋鞗]心思寫程序，問了論壇很多網(wǎng)友才搞定的。2008-07-07