滑动登录

最新推荐文章于 2023-08-01 09:52:45 发布

风叶翩翩

最新推荐文章于 2023-08-01 09:52:45 发布

阅读量534

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103001960

版权

JavaScript 专栏收录该内容

54 篇文章 3 订阅

订阅专栏

鼠标点击拖动滑块即可快速完成登录。

程序分析：

鼠标点击
鼠标点击后拖动滑块
鼠标点击取消
滑块水平移动

效果图演示

初始页面
在这里插入图片描述
点击滑块进行拖动

此时的你是不是急于想实现它呢？？？

代码演示


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    #textbar {

        margin: 10px;
        height: 80px;
        border-radius: 38px;
        background-color: gray;
        opacity: 0.5;
    }
    #touch_bar {
        position: relative;
        top: -82px;
        border: 2px solid blue;
        width: 15%;
        height: 80px;
        border-radius: 38px;
        background-color: white;
        display: flex;
        flex: row;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    #textnew {
        position: relative;
        top: -164px;
        height: 80px;
        border-radius: 38px;
        background-color: blue;
        z-index: 15;
    }

    #textold {
        height: 80px;
        z-index: 10;
        display: flex;
        flex: row;
        justify-content: center;
        align-items: center;
    }

    </style>

</head>

 

<body>

    <div id="textbar">

        <div id="textold">

            <span style="font-size: 30px">滑动登录</span>

        </div>

        <div id="touch_bar">

        </div>

        <div id="textnew"></div>

    </div>

</body>

<script>

var isTouch = false; //是否点击

var startX = 0; //鼠标点击的偏移量，进行平滑移动

(function() {
    var touch_bar = document.getElementById("touch_bar");
    var textbar = document.getElementById("textbar");
    var textnew = document.getElementById("textnew");

    /* 
    为滑块绑定鼠标移动事件
    当鼠标在滑块上移动时，滑块在水平方向上跟随移动
    */

    touch_bar.onmousemove = function(ev) {
        var ev = ev || event;
        if (ev.clientX - startX > 0 &&
            ev.clientX - startX < textbar.offsetWidth - touch_bar.offsetWidth &&
            isTouch) {
            touch_bar.style.left = ev.clientX - startX + "px";
            textnew.style.width = ev.clientX - startX + touch_bar.offsetWidth / 2 + "px";

        }

    }

    /*
    设置滑块点击事件
    */

    touch_bar.onmousedown = function(ev) {

        isTouch = true;

        startX = event.clientX;

    }

    /*
    设置滑块鼠标点击取消事件
    */

    touch_bar.onmouseup = function(ev) {
        isTouch = false;
        startX = 0;
        touch_bar.style.left = "0px";
        textnew.style.width = "0px";
    }

    /*
    设置滑块鼠标移出事件
    */

    touch_bar.onmouseout = function(ev) {
        isTouch = false;
        startX = 0;
        touch_bar.style.left = "0px";
        textnew.style.width = "0px";
    }

    //重置偏移量
    touch_bar.style.left = "0px";
    textnew.style.width = "0px";

})();

</script>

</html>

风叶翩翩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动登录

鼠标点击拖动滑块即可快速完成登录。程序分析：鼠标点击鼠标点击后拖动滑块鼠标点击取消滑块水平移动效果图演示初始页面点击滑块进行拖动此时的你是不是急于想实现它呢？？？代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫