首页 > 代码库 > JQ打字效果
JQ打字效果
<!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>
效果如下图：
JQ打字效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。