JQ打字效果

最新推荐文章于 2020-06-29 09:42:48 发布

weixin_30603633

最新推荐文章于 2020-06-29 09:42:48 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/baixc/p/4225893.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ字幕打字效果</title>
<style>
*{margin: 0;padding: 0;}
body{background-color: #000;color: #00FF00;padding: 100px;font-size: 30px;}
.hide{display: none;}
</style>
</head>
<body>
<!-- 输出文本的DIV -->
<div id="showBox"></div>
<!-- 想要输出的文本 -->
<div class="hide" id="conToWrite">
    Login : username<br>
    password : ******<br>
    Access is granted<br>
    中文呢？
</div>
<script src="http://www.lamahui.com/static/1.0/js/base/v1.js"></script>
<script>
$(function () {
    var showBox = $('#showBox'),    //文本输出
        con  = $('#conToWrite'),    //想要输出的文本
        text = null,
        charIndex = -1,
        len = 0;

    function writeContent(init){
        if(init){
            text = con.html();
        }
        if (charIndex === -1) {
            charIndex = 0;
            len = text.length;
        }

        var initString = showBox.html();
        initString = initString.replace(/<span.*$/gi,'');

        var theChar = text.charAt(charIndex);
        var nextFourChars = text.substr(charIndex,4);
        if (nextFourChars === '<br>' || nextFourChars === '<BR>') {
            theChar = '<br>';
            charIndex += 3;
        }
        initString = initString + theChar + "<span id='blink'>_</span>";
        showBox.html(initString);
        charIndex = charIndex/1 + 1;

        if (charIndex % 2 === 1 ) {
            $('#blink').hide();
        } else {
            $('#blink').show();
        }

        if (charIndex <= len) {
            setTimeout(function(){
                writeContent(false);
            }, 150);
        } else {
            blinkSpan();
        }
    }
    var currentStyle = 'inline';
    function blinkSpan(){
        if(currentStyle=='inline'){
        currentStyle='none';
        }else{
        currentStyle='inline';
        }
        $('#blink').css('display',currentStyle);
        setTimeout(function(){
            blinkSpan();
        },500);
    }

    writeContent(true);
});
</script>
</body>
</html>

效果如下图：

转载于:https://www.cnblogs.com/baixc/p/4225893.html

weixin_30603633

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ打字效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JQ字幕打字效果</title><style>*{margin: 0;padding: 0;}body{background-color: #00...
复制链接

扫一扫