JS实现滑动条案例

本文实例为大家分享了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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Javascript开发sliding-nav带滑动条效果的导航插件

    使用Javascript开发sliding-nav带滑动条效果的导航插件

    本文介绍如何使用纯Javascript来开发一款简单的JS插件,本插件可以实现鼠标悬停在导航上时,下方的滑动条自动从当前菜单滑动到所选菜单当中去. 本项目的源代码寄宿于GitHub,记得点小星星哦: https://github.com/dosboy0716/sliding-nav 一.前言 效果如下图: 二.使用方法 本插件只需要如下的三步,就可以在您的项目中使用: 1.在</body>标记结束前,引用sliding-nav.js文件 2.在需要滑动条的菜单容器上加类名 sliding-na

  • js实现水平和竖直滑动条

    js实现水平和竖直滑动条

    最近在做练手项目时候,需要用到滑动条,所以就稍微研究了一下. 首先来看水平滑动条,效果图如下: 代码如下: <html> <head> <meta charset="UTF-8"> <title>水平滑动条</title> <style> * { margin: 0; padding: 0; } .scroll { margin: 100px; width: 500px; height: 5px; backgrou

  • js判断横竖屏及禁止浏览器滑动条示例

    复制代码 代码如下: var $horizontal = $('.horizontal_screen') ; //可自定义横屏模式提示样式 var $document = $(document) ; var preventDefault = function(e) { e.preventDefault(); }; var touchstart = function(e) { $document.on('touchstart touchmove', preventDefault); }; var

  • 原生js拖拽功能制作滑动条实例代码

    原生js拖拽功能制作滑动条实例代码

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: <div class="bar_wrap" id="wrap"><!--外包裹元素--> <div class="bar_container"><!--滑动条--> <div class=&qu

  • JS实现滑动条案例

    JS实现滑动条案例

    本文实例为大家分享了JS实现滑动条效果的具体代码,供大家参考,具体内容如下 在完成这个案例之前需要看一下这个博客:JS案例-添加缓动画 这个案例会用到上面博客的缓动画函数.实现效果如下: 完整代码如下: html代码: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-

  • js实现滑动进度条效果

    本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下 进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} .progress-bar{position:relativ

  • AjaxUI：滑动条

    New Document body{text-align:center;font:12px Arial;} #bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;} #drag{width:20px;height:20px;background:#0ff;} p{width:600px;text-align:left;} var Parameter; var first=true;

  • 用jquery实现自定义风格的滑动条实现代码

    用jquery实现自定义风格的滑动条实现代码

    前些天我们学生在线首页改版,要做一个工具栏,由于版面的限制,原先策划的很多工具只好安排在一个小区域里面,具体效果如下: 当然,这样的效果,用html自带的控件也可以实现.不过自定义的话就可以自己设置滑动条的样式啦,比如说设为红色.蓝色等,按钮形状也可以自己做啦. 需要实现的效果是,这些工具一次最多在可见区域显示9个(这里假设工具项总数多于9个,不满9个的话,将来也很有可能扩展到9个),点击上下的按钮即可将可见区域内的工具区域上下移动. 但是这样做好后,运营人员给我提意见了:要是移动滑动条就可以实

  • jQuery实现带滑动条的菜单效果代码

    jQuery实现带滑动条的菜单效果代码

    本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • iOS实现双向滑动条效果

    iOS实现双向滑动条效果

    最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import <UIKit/UIKit.h> typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count); @interface HLDoubleSlideView : UIView @property(nonatomic,assign)CGFloat maxValue; @proper

随机推荐