js動畫函式實現側邊欄動態顯示內容

阿新 • • 發佈：2021-02-07

技術標籤：前端 js javascript css

功能概要

滑鼠懸浮側邊欄彈出資料框同時指示圖示進行變化
效果圖

實現原理

實現過程有兩部分組成：顯示箭頭，以及顯示內容盒子
通過滑鼠懸浮以及離開註冊監聽事件，監聽事件中呼叫動畫函式
動畫函式事件步驟：
1. 通過設定定時器setInterval不斷改變顯示內容盒子的e.style.left位置
2. 並通過移動目標位置與當前內容盒子左偏移offsetLeft來控制移動步數，實現緩動動畫
3. 結束條件：內容盒子左偏移等於目標位置
4. 設定回撥函式在結束定時器時設定顯示箭頭方向

注意點

移動步數需要考慮在前進/後退時，選取的取整函式不一樣
在chrome中進行測試的時候，內容盒子的offsetLeft一直處於不變狀態，也即出現了obj.offsetLeft - 1一直等於 obj.offsetLeft，進行bug除錯還沒有找出問題，但是在火狐等其他瀏覽器都是Ok的。還是挺懵的，如果有人明白為什麼出現這種情況，還望指教！

程式碼實現

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>practice1</title>
    <link href="../css/practive1.css" rel="stylesheet"/>
    <script src="../js/animate.js"></script>
    <script type="text/javascript" src="../js/practice1.js"></script>
</head>

<body>
<div class="sidderbar">
    <span>⬅</span>
    <div class="con">展示出來</div>
</div>
</body>

</html>

css


.sidderbar {
    position: fixed;
    top: 100px;
    right: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
}

.con {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 40px;
    line-height: 40px;
    background-color: #84c170;
    z-index: -9;
}

animate.js

/**
 * 動畫封裝
 * @param obj 移動物件
 * @param target 移動目標位置
 * @param timeout 每次移動間隔
 */
function animate(obj, target, timeout,callback) {
    // 清空已有的定時器
    clearInterval(obj.timer);
    // 為每個物件開闢一個定時器
    obj.timer = setInterval(function () {
        // 移動步長
        var step = (target - obj.offsetLeft) / 10;
        // 判斷是否為前進還是後退
        step = step > 0? Math.ceil(step): Math.floor(step);
        console.log('step = ' + step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 改變狀態
           if (callback) {
               callback();
           }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    },timeout)
}

practice.js

window.addEventListener('pageshow',function () {
    var sidderbar = document.querySelector('.sidderbar');
    var con = document.querySelector('.con');

    sidderbar.addEventListener('mouseenter',function () {
        // 向左移動 con 盒子寬度減去 父盒子sibberbar寬度 其中left絕對於父盒子的距離
        animate(con,sidderbar.offsetWidth - con.offsetWidth  ,15,function () {
                sidderbar.children[0].innerHTML = '➡';
        });
    })

    sidderbar.addEventListener('mouseleave',function () {
        animate(con,0,15,function () {
            sidderbar.children[0].innerHTML = '⬅';
        });
    })

})