本文實例講述了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測試效果如下:

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答