文字效果 – 有爱前端

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>文字效果</title> <style type="text/css"> body { background: #222; color: #f0f0f0; } #messenger { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: monospace; font-size: 20px; white-space: nowrap; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9); } </style> </head> <body> <div id="messenger"></div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var Messenger = function(el){ 'use strict'; var m = this; m.init = function(){ m.codeletters = "6549sfd5416sdfg49841g6ss54"; m.message = 0; m.current_length = 0; m.fadeBuffer = false; m.messages = [ 'This is a message, which can be long and all.', 'This could be another message.', 'Also short ones work!', 'Cool.' ]; setTimeout(m.animateIn, 100); }; m.generateRandomString = function(length){ var random_text = ''; while(random_text.length < length){ random_text += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length)); } return random_text; }; m.animateIn = function(){ if(m.current_length < m.messages[m.message].length){ m.current_length = m.current_length + 2; if(m.current_length > m.messages[m.message].length) { m.current_length = m.messages[m.message].length; } var message = m.generateRandomString(m.current_length); $(el).html(message); setTimeout(m.animateIn, 20); } else { setTimeout(m.animateFadeBuffer, 20); } }; m.animateFadeBuffer = function(){ if(m.fadeBuffer === false){ m.fadeBuffer = []; for(var i = 0; i < m.messages[m.message].length; i++){ m.fadeBuffer.push({c: (Math.floor(Math.random()*12))+1, l: m.messages[m.message].charAt(i)}); } } var do_cycles = false; var message = ''; for(var i = 0; i < m.fadeBuffer.length; i++){ var fader = m.fadeBuffer[i]; if(fader.c > 0){ do_cycles = true; fader.c--; message += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length)); } else { message += fader.l; } } $(el).html(message); if(do_cycles === true){ setTimeout(m.animateFadeBuffer, 50); } else { setTimeout(m.cycleText, 2000); } }; m.cycleText = function(){ m.message = m.message + 1; if(m.message >= m.messages.length){ m.message = 0; } m.current_length = 0; m.fadeBuffer = false; $(el).html(''); setTimeout(m.animateIn, 200); }; m.init(); } console.clear(); var messenger = new Messenger($('#messenger')); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 文字效果