- JQuery Shuffle Text文字特效演示实例，也不像是打字效果，看上去像是洗牌效果。不过总体是动态的，还可以吧，希望有喜欢的朋友，拿出参考学习、使用都可以吧。
-
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jquery洗牌文本输出插件shuffleText</title><style>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;}html {line-height: 1;}ol, ul {list-style: none;}table {border-collapse: collapse;border-spacing: 0;}caption, th, td {text-align: left;font-weight: normal;vertical-align: middle;}q, blockquote {quotes: none;}q:before, q:after, blockquote:before, blockquote:after {content: "";content: none;}a img {border: none;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}body {background: #FFF;-webkit-font-smoothing: antialiased;}.inner {width: 750px;height: auto;margin: 0 auto;}@media only screen and (max-width: 750px) {.inner {width: 100%;padding: 0 40px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}}a {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}h1 {padding: 30px 0;margin-bottom: 50px;background: #ff6860;font: 700 20px/20px "proxima-nova", sans-serif;color: #FFFFFF;letter-spacing: 1px;text-transform: uppercase;text-align: center;text-shadow: 0 1px 0 #ff5047;}p {margin: 0 auto 100px;font: 400 14px/24px "Helvetica", "Arial", sans-serif;color: #4D4D4D;text-align: center;}p strong,p a {font-weight: bold;color: #ff6860;}p a {text-decoration: none;border-bottom: 1px solid #E8E8E8;}div {text-align: center;}blockquote {display: inline-block;padding: 10px 20px;margin-bottom: 100px;background: #F8F8F8;font: 700 30px/34px "proxima-nova", sans-serif;color: #ff6860;letter-spacing: 1px;text-align: center;}@media only screen and (max-width: 500px) {blockquote {font-size: 24px;line-height: 28px;}}form {position: relative;width: 400px;margin: 0 auto 40px;text-align: left;}form input[type="text"] {width: 300px;padding: 0 0 10px;background: transparent;border: none;outline: none;border-bottom: 1px solid #E9E9E9;font: 400 20px/20px "Helvetica", "Arial", sans-serif;color: #4D4D4D;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-font-smoothing: antialiased;}form input[type="submit"] {position: absolute;right: -2px;top: -6px;padding: 12px 15px;background: transparent;border: 2px solid #ff6860;outline: none;font: 700 12px/12px "proxima-nova", sans-serif;color: #ff6860;text-transform: uppercase;text-align: center;text-decoration: none;letter-spacing: 1px;cursor: pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-border-radius: 0px;-moz-border-radius: 0px;-ms-border-radius: 0px;-o-border-radius: 0px;border-radius: 0px;-webkit-appearance: none;-webkit-font-smoothing: antialiased;}form input[type="submit"]:hover {color: #FFFFFF;background: #ff6860;text-shadow: 0 1px 0 #ff5047;}@media only screen and (max-width: 500px) {form {width: 100%;}form input[type="text"] {width: 100%;}form input[type="submit"] {position: relative;top: 0;left: 0;margin-top: 5px;padding: 12px 0;width: 100%;}}.button {display: block;max-width: 220px;margin: 0 auto 100px;padding: 15px 0;border: 2px solid #ff6860;font: 700 12px/12px "proxima-nova", sans-serif;color: #ff6860;text-transform: uppercase;text-align: center;text-decoration: none;letter-spacing: 1px;}.button:hover {color: #FFFFFF;background: #ff6860;text-shadow: 0 1px 0 #ff5047;}footer p {font-size: 12px;}footer p span {-webkit-font-smoothing: auto;}footer p a {font-weight: 400;-webkit-font-smoothing: auto;}footer p a:hover {color: #4D4D4D;}</style><script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script><script type="text/javascript">(function ($) {var isActive = false;$.fn.shuffleText = function(shuffleResult, options){var $this = $(this);var aChars = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","k","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");var defaults = $.extend({frames : 40,maxSpeed : 1000,amount : 3,complete : null}, options);if(shuffleResult == undefined)shuffleResult = '';var aToShuffle = $this.text().split(''),aShuffleResult = shuffleResult.split(''),iFlag = 0, n = 0, duration = 0, iLenght = 0,interval, aLetters;if(!isActive){isActive = true;return $this.each(function(){replaceEntry();aLetters = $this.find('span');if(defaults.amount < 0)defaults.amount = 0;if((iLength * (defaults.amount + 1) * defaults.frames) > defaults.maxSpeed){duration = defaults.maxSpeed / (iLength * (defaults.amount + 1));}else{duration = defaults.frames;}randomChars();interval = setInterval(randomChars,Math.floor(duration));function replaceEntry(){$this.empty();if(aToShuffle.length > aShuffleResult.length)iLength = aToShuffle.length;elseiLength = aShuffleResult.length;for(i = 0; i < iLength; i++){if(aToShuffle[i] == undefined)$this.append($('<span></span>'));else$this.append($('<span>'+aToShuffle[i]+'</span>'));}}function randomChars(){var randomChars = aChars[Math.floor(Math.random() * aChars.length)];if(iFlag >= iLength){isActive = false;$this.text(shuffleResult);clearInterval(interval);if(typeof defaults.complete == 'function')defaults.complete.call($this);}else{if(n == defaults.amount){if(iFlag >= aShuffleResult.length)$(aLetters[iFlag]).text('');else$(aLetters[iFlag]).text(aShuffleResult[iFlag]);iFlag++; n = 0;}else{$(aLetters[iFlag]).text(randomChars);n++;}}}});}};}(jQuery));</script><script type="text/javascript">$(document).ready(function(){var target = $('blockquote');$('form').submit(function(e){e.preventDefault();target.shuffleText($('#entry').val());});});</script></head><body><h1>JQuery Shuffle Text 1.0</h1><div class="inner"><p><strong>JQuery Shuffle Text</strong> is a lightweight jQuery plugin able to shuffle any of your text content. Easy to use, it offers a set of settings to customize it.Here is a demonstration of this plugin with <strong>default settings</strong> to see it in action...</p><div><form method="post" action=""><input type="text" id="entry" placeholder="在这里输入文字..." autofocus /><input type="submit" value="点击这里" /></form><blockquote>输出结果演示</blockquote></div></div></body></html>
标签：网站源码
下一篇：CSS3文字阴影特效绝对酷