html+css+js简单实现注册登录页面滑块移动

软工不秃头

已于 2023-07-18 18:15:05 修改

阅读量672

点赞数 2

文章标签： javascript html css

于 2023-07-18 17:31:17 首次发布

本文链接：https://blog.csdn.net/weixin_68854196/article/details/131792047

版权

该文章展示了一段HTML、CSS和JavaScript代码实现的登录注册表单切换效果。用户点击覆盖在左侧登录表单上的箭头图标，表单会向右滑动显示注册表单，再次点击则返回登录表单。代码示例适合前端初学者学习。

摘要由CSDN通过智能技术生成

效果演示

html代码：

<div class="box">
        <form action="" class="item1">
            <input type="text" placeholder="用户名">
            <input type="password" placeholder="密码">
            <button>登录</button>
        </form>
        <div class="cover">
            <span>&gt;</span>
            <span>&lt;</span>
        </div>
        <form action="" class="item2">
            <input type="text" placeholder="输入密码">
            <input type="password" placeholder="再次确认密码">
            <button>注册</button>
        </form>
    </div>

css代码：

.box {
            position: relative;
            width: 500px;
            margin: 100px auto;
            background-color: skyblue;
        }
        .item1,
        .item2 {
            position: absolute;
            width: 250px;
            background-color: yellowgreen;
            border: 1px solid yellowgreen;
            border-radius: 5px;
            box-shadow: 15px 15px 15px #ccc;
        }
        input {
            height: 30px;
            outline: none;
            border: none;
            margin-top: 25px;
            margin-left: 40px;
            border: 1px solid #ccc;
            border-radius: 15px;
        }
        .item1 {
            top: 0;
            left: 0;
        }
        .item2 {
            top: 0;
            right: 0;
        }
        button {
            width: 70px;
            height: 30px;
            outline: none;
            border: none;
            border-radius: 5px;
            margin-left: 80px;
            margin-top: 15px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 173px;
            border-radius: 5px;
            z-index: 999;
            background-color: skyblue;
        }
        .cover span {
            position: absolute;
            top: 65px;
            left: 100px;
            text-align: center;
            line-height: 50px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 30px;
            color: powderblue;
            opacity: .5;
            cursor: pointer;
            transition: all .3s;
            background-color: white;
        }
        .cover span:nth-child(2) {
            display: none;
        }
        span:hover {
            transform: translateY(-5px);
            opacity: .5;
        }

js代码：

var spans =document.querySelectorAll('.cover span')
        var cover=document.querySelector('.cover')
        var box=document.querySelector('.box')
        spans[0].addEventListener('click',function() {
            move(cover,250,function() {
                spans[0].style.display='none'
                spans[1].style.display='block'
            })
        })
        spans[1].addEventListener('click',function() {
            back(cover,0,function() {
                spans[1].style.display='none'
                spans[0].style.display='block'
            })
        })
        function move(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'
            },30)
        }
        function back(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'
            },30)
        }
    </script>

本人大二学生正在学习前端中，前端小白，技术很粗糙。错误希望能指出，积极接受批评指正。