JS實現滑動條案例

2022-07-04 18:02:19

本文範例為大家分享了JS實現滑動條效果的具體程式碼，供大家參考，具體內容如下

在完成這個案例之前需要看一下這個部落格：JS案例-新增緩動畫

這個案例會用到上面部落格的緩動畫函數。實現效果如下：

完整程式碼如下：

html程式碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>滑動條案例</title>
    <style>
        body {
            overflow-x: hidden;
        }
        
        .slidebar {
            position: absolute;
            top: 500px;
            right: 0;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
            background-color: #891383;
        }
        
        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: #891383;
            color: #fff;
            text-align: center;
            line-height: 40px;
            z-index: -1;
        }
    </style>
    <script src="../js/index.js"></script>
</head>
 
<body>
    <div class="slidebar">
        <span>⬅</span>
        <div class="con">問題反饋</div>
    </div>
    <script>
        // 獲取元素
        var slide = document.querySelector('.slidebar')
        var span = document.querySelector('span');
        var con = document.querySelector('.con');
        slide.addEventListener('mouseenter', function() {
            // 當動畫執行完畢就把左箭頭改為右箭頭
            moves(con, -160, function() {
                slide.children[0].innerHTML = '➡'
            })
        });
        slide.addEventListener('mouseleave', function() {
            // 當動畫執行完畢就把右箭頭又變為左箭頭
            moves(con, 0, function() {
                slide.children[0].innerHTML = '⬅'
            })
        })
    </script>
</body>
 
</html>

JS程式碼：

function moves(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 把步長值改為整數，不要出現小數的情況 往上取整
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 回撥函數寫在清除定時器裡面 這裡只能寫等於
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
        // console.log(obj.style.left);
 
    }, 15);
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JS實現滑動條案例

熱門文章