跳动的文字

最新推荐文章于 2020-11-06 08:48:21 发布

置顶 weixin_43166025

最新推荐文章于 2020-11-06 08:48:21 发布

阅读量755

点赞数

文章标签：前端跳动的文字文本框

本文链接：https://blog.csdn.net/weixin_43166025/article/details/82559212

版权

html部分

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字效果</title>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>
<body onLoad="flash()" style="position: relative;">
<div id="txt" style="font-size:16px;font-family:Arial;opacity: 1;position: absolute;left: 0.3rem;top: 0.1rem;z-index: 1;color: #999;">

</div>
<input type="text" name="" style="position: absolute;left: 0;top: 0;" id="text">
<body>
<html>

js部分

<script language="javascript">
    text = "Loading...";
    i    = 0;
    function flash(){
        str = text.charAt(i);
        str = "<span style='opacity: 0;'>" + str + "</span>";
        leftStr  = text.substr(0,i);
        rightStr = text.substr(i+1,text.length-i);
        txt.innerHTML = leftStr + str;
        i++;
        if (i>=text.length)i=0;
        setTimeout("flash()",100);
    }
    $("#text").focus(function(){
        $("#txt").hide();
    });
    $("#text").blur(function(){
        if($("#text[type=text]").val()==""){
            $("#txt").show();
        }else{
            $("#txt").hide();
        }
    });
</script>