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

效果演示 

 

html代码： 

        

            
            
            登录
        
        

            >
            <
        
        

            
            
            注册
        
    

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)
        }
    

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