JavaScript實現簡單的隱藏式側邊欄功能示例

2019-11-19 13:04:58

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript實現簡單的隱藏式側邊欄功能。分享給大家供大家參考，具體如下：

常見的隱藏式側邊欄，如分享、聯系客服等。通過設置速度來實現滑入滑出的動態效果

以下是代碼

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>www.survivalescaperooms.com js側邊欄</title><style type="text/css">*{margin: 0;padding: 0;}#div1{width: 160px; height: 320px; background: #fff; /*border: 1px solid red;*/position: relative;left:-140px;top:100px;}#div1 .hide{width: 140px; height: 320px; background: cyan; float: left;position: absolute;left: 0;top: 0;}#div1 .show{width: 17px; height: auto;background: skyblue;border: 1px solid #000;float: right; position: absolute; top: 39%;right: 0;}</style><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('div1');var timer;oDiv.onmouseover=function(){//startMove(10,0);speed,endstartMove(0);//這里稍作優化，原來傳入兩個參數改為一個參數};oDiv.onmouseout=function(){//startMove(-10,-140);startMove(-140);}function startMove(end){/*var oDiv=document.getElementById('div1');*/clearInterval(timer);timer=setInterval(function(){var speed=0;//從-140到0,速度為正，從0到-140，速度為負if(oDiv.offsetLeft>end){speed=-10;}else{speed=10;}if(oDiv.offsetLeft==end){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}},30);}}</script></head><body><div id="div1"><div class="hide"><ul><li>qq</li><li>weibo</li><li>jb51</li></ul></div><div class="show"><span>分享到</span></div></div></body></html>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試效果如下：