JS實現(xiàn)滑動條案例

更新時間：2022年07月05日 07:28:21 作者：setTimeout()

這篇文章主要為大家詳細介紹了JS實現(xiàn)滑動條案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)滑動條效果的具體代碼，供大家參考，具體內(nèi)容如下

在完成這個案例之前需要看一下這個博客：JS案例-添加緩動畫

這個案例會用到上面博客的緩動畫函數(shù)。實現(xiàn)效果如下：

完整代碼如下：

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() {
? ? ? ? ? ? // 當動畫執(zhí)行完畢就把左箭頭改為右箭頭
? ? ? ? ? ? moves(con, -160, function() {
? ? ? ? ? ? ? ? slide.children[0].innerHTML = '?'
? ? ? ? ? ? })
? ? ? ? });
? ? ? ? slide.addEventListener('mouseleave', function() {
? ? ? ? ? ? // 當動畫執(zhí)行完畢就把右箭頭又變?yōu)樽蠹^
? ? ? ? ? ? moves(con, 0, function() {
? ? ? ? ? ? ? ? slide.children[0].innerHTML = '?'
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
</body>
?
</html>

JS代碼：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: