Jquery--实现带光标的打字效果 

<html>
<head>
  <style>
.container{
            float: left;
            display: inline-block;
            position: relative;
        }
        @keyframes blink-caret { 50% { background-color: transparent; } }
        span{
            animation:blink-caret 1s step-end infinite;
            width: 3px;
            height: 20px;
            background-color: #000;
            float: left;
            position: absolute;
            right: -10px;
        }

  </style>
<script type="text/javascript" src="/jquery/jquery.js"></script>

<div class="container"></div>

<script>
var s = 'Welcome to LoVueAn';
    var con = $('.container');
    var index = 0;
    var length = s.length;
    var tId = null;
 
    function start(){
        con.text('');
        con.append('<span></span>');
        tId=setInterval(function(){
            con.append(s.charAt(index));
            if(index++ === length){
                clearInterval(tId);
                index = 0;
                start()
            }
        },400);
    }
 
    start();
    </script>

 

posted @ 2023-02-26 11:10  锐洋智能  阅读(55)  评论(0)    收藏  举报