具有緩衝效果的側欄展開客服系統
側欄客服系統是一種常用效果,滑鼠懸浮的時候能夠展開,離開的時候收縮。
展開和收縮過程通常具有緩衝效果,下面就通過程式碼例項介紹一下如何實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { margin: 0; padding: 0; } div { margin: 0; padding: 0; } .odiv { width: 200px; height: 200px; background: #f00; position: relative; left: -200px; top: 100px; } .sdiv { width: 20px; height: 60px; background: #00f; position: absolute; top: 70px; right: -20px; } </style> <script language="javascript"> window.onload = function () { var odiv = document.getElementById('odiv'); odiv.onmouseover = function () { startMover(0); } odiv.onmouseout = function () { startMover(-200); } } var timer = null; function startMover(itarget) { clearInterval(timer); var odiv = document.getElementById('odiv'); timer = setInterval(function () { var speed = (itarget - odiv.offsetLeft) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (odiv.offsetLeft == itarget) { clearInterval(timer); } else { odiv.style.left = odiv.offsetLeft + speed + 'px'; } }, 30); } </script> </head> <body> <div id="odiv" class="odiv"> <div id="sdiv" class="sdiv"></div> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function () {},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var odiv = document.getElementById('odiv'),獲取id屬性值為odiv的元素物件。
(3).odiv.onmouseover = function () {
startMover(0);
},為元素註冊onmouseover 事件處理函式。
(4).odiv.onmouseout = function () {
startMover(-200);
},為元素註冊onmouseout事件處理函式。
(5).var timer = null,宣告一個變數並賦值為null,用作定時器函式的標識。
(6).function startMover(itarget) {},此方法實現了緩衝運動效果,引數是目標值。
(7).clearInterval(timer),停止定時器函式的執行,否則的如果滑鼠連續移入移出的話會導致多個定時器函式疊加執行。
(8).var odiv = document.getElementById('odiv'),獲取元素物件。(9).timer = setInterval(function () {},30),通過定時器函式每隔30秒執行一次匿名函式,也就實現運動效果。
(10).var speed = (itarget - odiv.offsetLeft) / 10,緩衝動畫的速度引數變化值
(11).speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed),如果速度是大於0,說明是向右走,那麼就向上取整
(12).if (odiv.offsetLeft == itarget) {
clearInterval(timer);
},如果達到目標值,那麼停止定時器函式的執行。
(13). else {
odiv.style.left = odiv.offsetLeft + speed + 'px';
},否則的話繼續設定left屬性值,也就是繼續動畫效果。
二.相關閱讀:
(1).onmouseover事件參閱javascript mouseover事件一章節。
(2).onmouseout事件參閱javascript mouseout事件一章節。
(3).clearInterval()參閱clearInterval()一章節。
(4).setInterval()參閱setInterval()一章節。
(5).offsetLeft參閱offsetleft一章節。
(6).Math.ceil()參閱javascript Math.ceil()一章節。
(7).Math.floor()參閱javascript Math.floor()一章節。
相關文章
- 點選返回頂部程式碼具有緩衝效果
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- JavaScript側欄緩動分享選單詳解JavaScript
- 客服系統的三個發展階段
- 一側具有滑鼠跟隨效果的垂直導航選單
- 影片直播原始碼,預設展開側邊欄選單原始碼
- TornadoFx實現側邊欄選單效果
- 側欄導航自動定位效果詳解
- 商城側欄導航效果實現詳解
- vue實現側邊欄手風琴效果Vue
- JS錯誤記錄 – 右側懸浮框 – 緩衝運動JS
- 判斷客服系統效果好壞的5個標準
- 點選側邊欄展開和收縮程式碼例項
- jQuery 緩衝效果二級導航下拉選單jQuery
- js學習之——網頁側邊欄廣告效果JS網頁
- 客服系統是如何監測客服工作的?
- 線上直播原始碼,JS動態效果之,側邊欄滾動固定效果原始碼JS
- 開源線上客服系統(支援H5的線上客服系統原始碼基於PHP)H5原始碼PHP
- LINUX系統程式設計 關於SDTIO庫緩衝區Linux程式設計
- 拖動滾動條實現側欄導航定位效果
- 緩衝區分析
- C 標準庫IO緩衝區和核心緩衝區的區別
- 側邊浮動網站客服QQ網站
- Duilib的雙緩衝實現,附帶GDI、WTL的雙緩衝實現UI
- PHP的輸出緩衝區PHP
- jive中的緩衝技術
- Java™ 教程(緩衝流)Java
- JavaScript 緩衝運動JavaScript
- MySQL InnoDB緩衝池MySql
- Java NIO:緩衝區Java
- 快取與緩衝快取
- C 呼叫redis緩衝Redis
- getchar緩衝區
- 網頁固定側欄的做法網頁
- ASLR 是如何保護 Linux 系統免受緩衝區溢位攻擊的Linux
- Flutter drawer側邊欄Flutter
- 採用JavaScript+XML實現具有樹形選單功能的論壇側邊導航欄JavaScriptXML
- java線上客服系統Java