文本框动画

最新推荐文章于 2024-05-19 21:31:05 发布

恩洛

最新推荐文章于 2024-05-19 21:31:05 发布

阅读量217

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/SINGLEP/article/details/79953917

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .out {
            width: 320px;
            /*height: 200px;*/
            margin: 100px auto;
            position: relative;
            text-align: center;
        }

        .tips {
            width: 110px;
            height: 0;
            position: absolute;
            top: -25px;
            right: 0;
            font-size: 14px;
            color: #ffffff;
            background-color: #333333;
            border-radius: 3px;
            text-align: center;
        }
        input {
            width: 320px;
            height: 38px;
            font-size: 16px;
        }
        .user {
            font-size: 16px;
            position: absolute;
            top: 9px;
            left: 16px;
            padding: 0 2px;
            background-color: #ffffff;
            transition: all 0.5s;
            color: #aaa;
        }
    </style>
</head>
<body>
<form action="">
    <div class="out">
        <div class="user">用户名/手机号</div>
        <div class="tips">请输入登录账号</div>
        <input type="text" id="button">
    </div>
</form>
<script>
    document.getElementById('button').onfocus = function () {
        var h = 0;
        var timer = setInterval(function () {
            h += 2;
            document.getElementsByClassName('tips')[0].style.height = h + 'px';
            if (h > 20) {
                clearInterval(timer);
            }
        }, 10);
        document.getElementsByClassName('user')[0].style.transform = 'scale(0.7) translate(-25px,-29px)';
        document.getElementsByClassName('user')[0].style.color = 'deepskyblue';
    };
    document.getElementById('button').onblur = function () {
        var h = parseInt(document.getElementsByClassName('tips')[0].style.height);
        var timer = setInterval(function () {
            h -= 2;
            document.getElementsByClassName('tips')[0].style.height = h + 'px';
            if (h < 0) {
                clearInterval(timer);
            }
        }, 10);
        document.getElementsByClassName('user')[0].style.transform = 'none';
        document.getElementsByClassName('user')[0].style.color = '#aaa';
    }
//    事件方法
    document.getElementsByClassName('user')[0].οnclick=function () {
        document.getElementsByTagName('input')[0].focus();
    }
</script>
</body>
</html>